Zagadka CSS #2

Druga zagadka z serii CSS riddles.

Zasady niezmienne takie jak w pierwszej zagadce CSS. Ponadto dodałem punk 5, który wyjaśnia wątpliwości niektórych osób.

Zasady zagadek CSS

  1. Kod zawiera błąd
  2. Kod zawiera dokładnie jeden błąd
  3. Nie chodzi o ewentualną różnicę w interpretacji różnych przeglądarek jak Opera czy Firefox ani nawet programu Internet Explorer
  4. Odpowiedzi piszemy w komentarzach do postu zagadki. Kto pierwszy ten lepszy.
  5. Są to style do XHTML-a

Zagadka nr 2:

<style type="text/css" media="screen">
html, body {
 color:#333;background:#fff
}

/**{ margin:0;padding:*1em
}\*/

samp {
 display:block;
 text-align:center;
 content:"Hello from CSS!"
}

.p {
 font-size:90%;<!--text-align--> /**:left*/padding:1em /*0*/ 0
}

h2 {
 display:run-in;
 padding:10px 17px 5px .0
}
</style>

Kto wie gdzie jest błąd ? ;)

Odpowiedź na zagadkę nr 2:

dodano 23.10.2006

Błąd w kodzie CSS polegał na braku pseudo-elementu :before lub :after do selektora samp.

samp {
 display:block;
 text-align:center;
 content:"Hello from CSS!"
}

Według specyfikacji własność content możemy stosować tylko do selektorów posiadających pseudo-element :before lub :after.

W przyszłości (CSS3) będzie możliwa konstrukcja typu:

span {
 content:"CSS!"
}

Taka też:

span::before {
 content:"from "
}

Co ciekawe taka też:

span::before::before {
 content:"Hello "
}

Co w efekcie da nam Hello from CSS!, miłe prawda?

W kodzie CSS możemy używać komentarzy /* tu komentarz */. Jednak jeśli CSS-y znajdują się w dokumencie XHTML pomiędzy znacznikami <style /> to możemy używać komentarzy <!-- tu komentarz -->.

Dobrym zwyczajem jest używać tylko komentarzy slash gwiazdka. Nie trudno wyobrazić sobie przypadek przeniesienia kodu CSS do odrębnego pliku w którym te komentarze wygenerują błąd.

Różne przeglądarki różnie interpretują XHTML-owe komentarze w kodzie CSS, co może nam przysporzyć tylko więcej pracy. Użyłem ich tylko by odwrócić uwagę od prawdziwego błędu.

Jako pierwszy prawidłowej odpowiedzi udzielił psz.

  • Thursday, 19 October 2006
  • —
  • 8,100 views
  • —