Rzadko używane wartości display

Inline-block

Blok posiadający display: inline-block zachowuje się jak element liniowy jeśli chodzi o jego umieszczenie w dokumencie - nie wytwarza nowych linii przed i po sobie, lecz wnętrze ma blokowe. Przykładowo (screen) można mu zaaplikować margines. Tak samo jeśli nie ustawimy szerokości (będzie równa auto), to tekst początkowo nie będzie łamany.

Gdzie może się przydać inline-block? Pierwsze rozwiązanie jakie mi przyszło do głowy to gdy chcemy umieścić obramowany kwadratowy akapit z chmurką tagów w równie chaotycznym tekście jakiegoś sidebara… taki estetyczny nieład.

Należy zwrócić uwagę, że inline-block działa w nowoczesnych przeglądarkach. W Internet Eksplorerze 6 włącza dla elementu hasLayout.

Run-in

Specyfikacja mówi, że element ten w zależności od położenia może zachowywać się jak liniowy (inline) bądź blokowy (block). Wszystko zależy co umieścimy od razu za nim. Jeśli blokowy - run-in zmieni się w liniowy. Jeśli liniowy - zmieni się w blokowy. Przykład na żywo (zrzut ekranu dla nieposiadających Opery). Można powiedzieć, że jest to odwrotność działania inline (screen).

Jakie może być praktyczne zastosowanie tej dziwnej własności? Run-in pozwala w trywialny sposób umieścić nasz nagłówek wewnątrz jakiegoś bloku. Zwykle efekt taki osiągamy stosując floatowanie, prawda? Lecz float determinuje wyświetlanie blokowe. A gdybyśmy nie mogli użyć bloku - bo przykładowo marginesy zostaną zachowane, to co pozostaje? Run-in - proste wyjście z tej sytuacji.

Lecz jak na razie należy mówić o zastosowaniach run-in w kategoriach przyszłości - aktualnie tylko Opera radzi sobie z tą częścią CSS 2.1. Można także sobie zobaczyć testy dla przeglądarek związane z run-in, ale jak twierdzi autor nie wszystkie są prawidłowe.

Compact

Istnieje również podobna wartość dla display - compact. Moje tłumaczenie fragmentu „Cascading Style Sheets 2.0 Programmer’s Reference” Erica Meyer'a dotyczące compact:

Jeśli element A ma ustawione display na compact i za nim podąża element blokowy B i jeśli B nie jest ani floatowane ani pozycjonowane absolutnie, to A staje się blokiem liniowym zawierającym tylko jedną linię. Jeśli A nie może stać się pojedynczą linią, to zostaje elementem blokowym. Jeśli natomiast może, to jego szerokość jest porównywana z szerokością marginesu z jednej strony elementu B; to który margines jest brany pod uwagę zależy od wartości własności direction dla elementu B. Jeśli szerokość A jest mniejsza od szerokości wybranego marginesu elementu B to jest on umieszczany wewnątrz tego marginesu w taki sposób, że górna linia tekstu elementu A jest wyrównywana z górną linią pierwszej linijki elementu B. Wysokość A wpływa na wysokość pierwszej linijki elementu B. Natomiast jeśli A nie mieści się wewnątrz margnesu, wtedy zostaje elementem blokowym.

Słodkie, prawda? :) Przykład i screen. Ze względu na to, że compact zostało usunięte w CSS 2.1 nie powinniśmy sobie nim zaprzątać głowy… o wiele mądrzejrze zadecydowały, że nie ma sensu. ;-)

Marker

To samo stało się z display: marker. Służy on do zamieniania generowanej treści (dlatego content musi zawierać jakąś wartość do wyświetlenia) na marker dla elementów które poprzedza, bądź za którymi podąża. Z tego powodu wartość marker powinna być stosowana tylko dla pseudoelementów :after i :before. Zadziała też tylko jeśli generujemy treść dla elementu blokowego - w innym przypadku display: marker będzie równy display: inline. Podobnie jak to miało miejsce w przypadku compact, taki marker (przykładowo z treścią content: "&&" jeśli chcemy mieć takie „wypunktowanie”) jest umieszczany wewnątrz marginesu elementu blokowego. Margines ten nie jest wymagany, ale bardzo mile widziany - w innym przypadku marker nakryje zawartość bloku z którym jest związany.

Szerokość przyjmuje domyślnie wartość auto, co oznacza że jest określona przez ilość tekstu. Wysokość określa nie height a line-height. Odległość pomiędzy markerem a elementem blokowym, z którym jest związany określa własność marker-offset. Wyrównanie w pionie zależy od tego czy generujemy treść poprzez :before czy :after. Pierwszy pseudoelement umieszcza marker wyrównany w taki sam sposób jak tekst jednej linii w compact - do pierwszej linijki, :after natomiast równa do górnego linii ostatniej linijki tekstu elementu blokowego. Gdyby się zdarzyło, że blok dla którego tworzymy marker nie posiada tekstu, to dolne krawędzie bloku i markera będą wyrównane.

Nie udało mi się zmusić żadnej przeglądarki do zachowania opisanego wyżej… wynik wygląda normalnie - jak zwyczajna generowana treść, więc nici z prawdziwego screenshota. Domyślam się jednak, że powinno to wyglądać mniej więcej tak.

Wypisane tutaj właściwości CSS są raczej przykładami, że „można” niż „powinno”. Kompatybilność z przeglądarkami to pierwsza sprawa - na Quirksmode jest dokładnie wypisane co gdzie działa. Drugą sprawą jest kompatybilność ze standardami - marker i compact nie istnieją w CSS2.1, które mimo wszystko powinno być brane pod uwagę przed CSS2 w którym jest masa nieścisłości - być może wrócą one zmienione do odnowionego CSS2.1. Koniec końców mam nadzieję, że te opisy i przykłady rozjaśniły nieco zawiłości specyfikacji.

Mozilla pozwala używać swoich rozszerzeń CSS, ale efekty niekoniecznie pokrywają się z tym co napisano w specyfikacji.

• -moz-inline-block
• -moz-run-in
• -moz-compact
• -moz-marker