hasLayout i jego implikacje, cz. II
25 stycznia 2006
Pierwszy fragment tłumaczenia (i interpretacji) artykułu „On having layout” wykonane na licencji Creative Commons.
Obszerny wstęp do zagadnienia (notabene także tego tłumaczenia) jest dostępny we wpisie „hasLayout i jego implikacje, część I”.
Początki
Obdarowanie elementu tak zwanym „layoutem” może naprawić wiele niespójności w sposobie renderowania (wyświetlania) stron przez Internet Explorera.
John Gallant i Holly Bergevin zaklasyfikowali te niezgodności do błędów związanych z wymiarami, co oznacza, że zwykle mogą być naprawione przez zaaplikowanie elementowi szerokości bądź wysokości. To rozwiązanie prowadzi do pytania dlaczego „layout” - układ, oznaczony przez wymiary - zmienia renderowanie oraz zależności między elementami. Pomimo trafności pytania, trudno na nie odpowiedzieć. W tym artykule autorzy koncentrują się na niektórych aspektach tego skomplikowanego problemu. Więcej bardziej dokładnych i szczegółowych przykładów oraz dyskusji można będzie znaleźć w dołączonych hiperłączach.
hasLayout - Definicja
Dla Internet Explorera pod Windows „layout” jest dość specyficznym pomysłem określającym w jaki sposób - odnosząc się do okna - elementy są rysowane, w jaki wyznaczają granice dla swojej zawartości, jak oddziałują wzajemnie i odnoszą się do innych elementów oraz jaki mają wpływ na wysyłanie zdarzeń przez aplikację bądź użytkownika.
Programiści Microsoftu zadecydowali, że elementy posiadające wokoło siebie blok powinny być w stanie uzyskać „właściwość”, którą określają jako layout, bądź hasLayout.
hasLayout prawdopodobnie nie jest ani właściwością ani nawet zachowaniem - raczej odziedziczoną po silniku koncepcją renderowania, która nadaje własność elementowi. Ta własność renderowania może być nieodwracalnie przełączona na wartość logiczną true przez niektóre właściwości CSS. Także niektóre elementy HTML domyślnie posiadają layout.
Karty rozdane, trzeba grać
Problem z hasLayout wpływa na projektantów (i koderów) na wszystkich poziomach zaawansowania. Layout (zwykle jego brak - przyp. tłum.) ma trudny do przewidzenia i niecodzienny wpływ na wyświetlanie się bloków go posiadających. To samo dotyczy się jego implikacji na elementy potomne wewnątrz ram pudełka.
Konsekwencjami posiadania layoutu (bądź jego braku) może być:
- Wiele błędów elementów pływających (
floatów) - Inne traktowanie podstawowych właściwości bloków.
- Zapadanie się marginesów pomiędzy pojemnikiem a jego potomkami.
- Różnorakie problemy z konstrukcją list.
- Różnice w umieszczeniu obrazków teł.
- Różnice między przeglądarkami podczas używania skryptów
Skąd layout przychodzi
W przeciwieństwie do standardowych właściwości lub nawet specyficznych właściwości CSS (-moz, -op - przyp. tłum.) layout nie jest przydzielany przez deklaracje CSS. Innymi słowy, nie ma „właściwości layout”.
Poniższe elementy wydają się posiadać layout, nawet jeśli dokumentacja MSDN nie wyraża się o tym jasno.
<table><td><body><img><hr><input>,<select>,<textarea>,<button><iframe>,<embed>,<object>,<applet><marquee>
Właściwości CSS
Poniższe właściwości CSS oraz ich wartości pozwalają nadać layout elementowi, jeśli zostaną mu zastosowane.
position: absolute
Odnosi się do otaczającego bloku i tutaj właśnie zaczynają się kłopotyfloat: left|right
Pływanie elementów zawiera w sobie wiele dziwactw ze względu na niektóre aspekty layoutu elementudisplay: inline-block
Czasem jest jedynym wyjściem jeśli element jest typu liniowego lecz potrzebuje layoutu. Włączenie hasLayout jest najprawdopodobniej jedynym prawdziwym efektem tej właściwości.width: dowolna wartość
Jest zwykle poprawką używaną kiedy hasLayout psuje zamierzony efekt.height: dowolna wartość
height: 1%jest używany w Holly Hack (najbezpieczniej używać1px- przyp. tłum.)zoom: dowolna wartość
Specyficzna dla MS, nie waliduje się.Zoom: 1może zostać użyte dla debugowania.writing-mode: tb-rl
Specyficzna dla MS, nie waliduje się.
Cdn. Część III →
