Zwycięzca konkursu CSS

Panie i Panowie. Brawa dla Krzysztofa Urbasa za zwycięstwo w konkursie CSS.

Powiem szczerze, że miałem duży dylemat pomiędzy jeszcze jedną pracą. Generalnie, co zadecydowało to mała wielkość kodu, brak nadmiarowych klas czy tagów i jeden szczegół – obecność wrappera na wszelki wypadek. Ten css jest po prostu dobrze napisany i działa. A propos – na stronie Opery możecie przetestować go pod Operą Mini.

Punktowaliśmy przede wszystkim to, czy używacie najświeższych ficzerów CSS3. Tak więc można było użyć przede wszystkim dwóch rzeczy: display: box oraz calc. Potem było działanie na urządzeniach mobilnych – wiele przysłanych rozwiązań tego nie wspierało. Liczyła się też schludność kodu. Jeśli ktoś dodawał mnóstwo niepotrzebnych id to był oceniany niżej (to musiało być jednym z kryteriów z powodu wąskiej tematyki, mimo że identyfikatory nic nie robiły). Było też jedno rozwiązanie na table-cell oraz różne kombinowanie z marginesami czy z position.

Jeszcze raz przepraszam za opóźnienie. Ostatnio wróciłem do szkoleń z JS, pracuje też nad wieloma rzeczami naraz, co w połączeniu dało taki a nie inny efekt. Niemniej, chciałbym podziękować za kilkanaście rozwiązań. Większość z nich była na wysokim poziomie, chociaż pojawiło się kilka na podstawie float – zachęcam ich autorów do sprawdzenia nowości.

Komentarze

1

Gratuluję zwycięstwa!
Czy pojawi się dłuższy artykuł w którym zostaną przedstawione inne rozwiązania?

2

Gratulacje, nieźle to wygląda. Szczerze mówiąc box-orient i box-flex zupełnie nie znałem, ale to jest świetna okazja, żeby się zapoznać, tak więc dzięki za opublikowanie tego rozwiązania :)

3

Też próbowałem box-flex, ale chyba nasypałem za dużo klas. Co innego mnie ciekawi: dla przykładu proponuje wstawić tam jakąś dynamiczną strukturę choćby element p z dużą ilością tekstu. Box-flex, który ma 1 dostaje pierwszeństwo w podziale przestrzeni, i nawet jeżeli mamy wstawione takie same bloki tekstów, podział nie jest już 2:1. Niemniej jednak gratuluje zwycięscy :) Kod naprawdę dobrze napisany.

4

oczywiście takie cuda tylko w nowoczesnych przeglądarkach, ale jest na to sposób.
dzięki bibliotece flexie można używać flexible box model nawet w IE6 http://flexiejs.com/playground/?random

Oczywiście zachowanie jest emulowanie przez dodanie dodatkowych klas, obliczanie położeń i wymiarów boxów, manipulacje position i float…. ale działa.

z pewnością pojawią się też bugi, ale mimo wszystko warto się tym projektem zainteresować.

wujekbogdan
5

aha, zapomniałem o pseudoklasach np. nth-child. ale od tego mamy kolejną doskonałą bibliotekę selectivizr http://selectivizr.com/

ma tylko jedną przypadłość, nie działa dla ajaxowo ładowanych elementów. ale ponoć w nowej wersji ma to zostać poprawione.

polecam.

wujekbogdan
6

Damian, mojemu rozwiązaniu też nic nie brakowało. Chce pół książki :-)

7

a kto był jeszcze bliski zwycięstwa?

induktor
8

Fajnie jakby pokazać też inne nadesłane prace :)

9

Gratulacje! w Operze 11.01 nie działa…

koziolek
10

Nie mialo prawa dzialac zgodnie z tym co napisalismy.

induktor: gotomi w zasadzie przyslal to samo rozwiazanie, tylko oparte o body zamist wrapperze.

11

Rozwiązanie klarowne i czytelne ale nie dzieli elastycznych kolumn w stosunku 1:2 ;)

Bartek
12

Już wkrótce artykuł na ten temat.

13

Co prawda to prawda. Ladnie. Chociaż jak tak ma wyglądać przyszłość CSS to średnio to widzę. Każda prawie komenda powtórzona z przedrostkami i mało czytelne to to :)

14

Kartofelek, w przyszłości przedrostki nie będą już potrzebne ;]

15

Wszystko ma się skończyć gdy ustandaryzuje się CSS3 :)

16

Przecież było napisane, że ma działać choćby pod jedną sprawnie, a w zabawie liczy się wykorzystanie technologi przyszłości a nie dopasowywanie pod wszystkie przeglądarki.

17

Panowie, nie karmimy trolla, zapomnialem komus dac bana, juz naprawiam swoj blad.

18

Każde rozwiązanie ma dobre i złe strony a tu trochę się sypie przy ctrl + powstają 3 wiersze , a przy ctrl – całość ucieka w lewą stronę.Firefox 4.0.1.Przykład http://www.primarycss.com/Layout.aspx?jib=9

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>