Nowy dział: Zagadki CSS
Tym postem rozpoczynam nowy dział na blogu - CSS riddles. Co pewien czas będę wymyślał fragment kodu CSS z błędem, a Waszym zadaniem będzie go znaleźć. Ot taka zabawa :].
Zasady zagadek CSS
- Kod zawiera błąd
- Kod zawiera dokładnie jeden błąd
- Nie chodzi o ewentualną różnicę w interpretacji różnych przeglądarek jak Opera czy Firefox ani nawet programu Internet Explorer
- Odpowiedzi piszemy w komentarzach do postu zagadki. Kto pierwszy ten lepszy.
Na początek coś łatwego:
Zagadka nr 1:
strong {
color:#333;
height:1em;
padding:2px .35em 0;
border-bottom:1px solid #666
}
Nie ma sensu wklejać tego kodu do walidatora CSS, ponieważ nie ma tu żadnego błędu syntaktycznego.
Odpowiedź na zagadkę nr 1:
dodano 19.09.2006
Błąd w kodzie CSS był w wierszu drugim.
strong {
color:#333;
height:1em;
padding:2px .35em 0;
border-bottom:1px solid #666
}
Błąd polegał na zastosowaniu właściwości height do selektora <strong />.
Według specyfikacji CSS2 właściwość height można stosować do wszystkich elementów z wyjątkiem non-replaced inline elements, table columns, and column groups.
Ponieważ <strong /> jest właśnie non-replaced inline element zastosowanie do niego właściwości height jest błędem.
By kod był poprawny i co ważne w ogóle zadziałał, należy dodać do niego display:block.
Jako pierwszy poprawnej odpowiedzi udzielił quiris.
Saturday, 16 September 2006, 11:30 pm by Oskar Krawczyk
Fajna zabawa. Ja się nie będę bawił bo byłbym spoilerem ;-)
Sunday, 17 September 2006, 6:25 am by Całek
Przez chwilę się zastanawiałem jakich błędów należy szukać ;>)
Możesz dodać, że css tyczy się (x)html, a nie jakichś dowolnych dokumentów (a jeśli tyczy się dowolnych dokumentów, to… czegoś nie rozumiem i wtedy błędu nie widzę ;>) )
Sunday, 17 September 2006, 7:30 am by vermin
px/em?
Sunday, 17 September 2006, 7:39 am by chłopczyk
Widzę brak znaku “;” za “border-bottom:1px solid #666″
Sunday, 17 September 2006, 8:21 am by Oskar Krawczyk
Całek, to jest xhtml i z pewnością chodzi właśnie o ten błąd o którym myślisz :-)
Sunday, 17 September 2006, 9:59 am by Wojciech Bednarski
@chłopczyk, To nie jest błąd, średnik pełni rolę separatora. Po ostatniej wartości właściwości nie musi występować. Zresztą pisałem, że nie ma tu żadnego błędu syntaktycznego.
@vermin, nie wszystkie jednostki we wszystkich właściwościach można używać. Jednak w przypadku padding można używać zarówno em jak i px.
@Całek Tak. Kod dotyczy XHTML-a i CSS2. W zasadzie definicja w CSS1 i drafcie CSS3 wiele nie odbiega w tym przypadku od CSS2 ale umówmy się, że to właśnie o CSS2 chodzi.
Tylko dwie osoby wiedzą o co chodzi? Ej słabo z Wami coś :P
Sunday, 17 September 2006, 10:29 am by Tomek
Czyżby chodziło o height dla inline?
Sunday, 17 September 2006, 2:02 pm by Wojciech Bednarski
@Tomek, ciepło, ciepło, ale czegoś brakuje w tym co napisałeś ;-)
Sunday, 17 September 2006, 7:49 pm by krismag
line-height
Sunday, 17 September 2006, 8:43 pm by quiris
strong jest elementem typu non-replaced inline (wewnętrzny niepodmieniany) http://www.w3.org/TR/html401/struct/text.html#edef-STRONG i jako takiemu nie jest aplikowany atrybut height: http://www.w3.org/TR/CSS21/visudet.html#propdef-height
Monday, 18 September 2006, 1:58 pm by Meaglin
Szkoda, ze wcześniej tego wpisu nie przyuważyłem, zagadka banalna. :) Next please.
Tuesday, 19 September 2006, 5:37 pm by Wojciech Bednarski
@ Meaglin - postaram się wymyślić coś trudniejszego :]
Tuesday, 19 September 2006, 8:59 pm by vmario
Jak dla mnie to było dosyć trudne. Nie wpadłbym na to, że atrybut height w ogóle nie pasuje.
Thursday, 21 September 2006, 10:05 pm by Tomek
Eee, ja pierwszy byłem:P
Thursday, 21 September 2006, 11:48 pm by Wojciech Bednarski
@Tomek
Nie. Ponieważ napisałeś:
Co nie jest do końca prawidłową odpowiedzią, bo na przykład
<img />jest elementem liniowy i dla niego właściwośćheightjak najbardziej działa, bo jest to element zastępowany w przeciwieństwie dostrong