Niby banalny HTML…

Jest sobie HTML. Prezentujemy w nim listę elementów. Ponieważ jest to lista, na przykład lista cech, semantycznie wypada przedstawić ją jako <ul> lub <ol> (unordered/ordered list). Zarazem chcemy, by – bez zaśmiecania kodu HTML – wypisać ją po prostu jako ciągły tekst oddzielony przecinkami, np. „majonez, jajko, ananas„. Robimy to wyłącznie jako element prezentacji, nie samej treści w kodzie HTML. To też nie problem, prawda? Za pomocą CSS dodajemy przecinki za każdym elementem listy, z wyjątkiem ostatniego:

li::after {
  content: ", ";
}
li:last-child::after {
  content: "";
}

Niby wszystko działa… Lecz oto jeśli wewnątrz naszej listy umieścimy podlistę, Google Chrome płata nam figla. Jeżeli załamanie linii wypada po ostatnim elemencie podlisty, przecinek zawija się do drugiej linii, zamiast zostać w tej samej. Wygląda to paskudnie:

Co ciekawe, w Firefoksie problem nie występuje.

Jako ćwiczenie dla czytelnika pozostawiam pobawienie się tym przykładem na jsFiddle.

Layout in IE fixed

Thanks to MKL, który w ogóle uświadomił mnie, że od aktualizacji kodu miałem coś nie tak z wyświetlaniem w IE. Zamiast </div> w zboczkach było </div i FireFoxowi magicznie to wystarczało ;)

Edit: dopisałem rewrite rule dla tagów z tag clouda…  nie wiedziałem, że nie działało…

Z duchem poprawności

Po wczorajszym wybitnie meczącym dniu, a zwłaszcza jego pierwszej połowie (a o tej porze roku prawie całym ;P) – Konkursie na tworzenie stron internetowych (który był inny niż można sobie wyobrażać: Dostajemy 2 komputery, jest nas 3 (reprezentacja szkoły!), kompy nie mają neta (mamy dyskietkę żeby wymieniać pliki miedzy nimi (do czasu, bo Murionek zepsuł XD)), mamy narzucony przez nich temat oraz materiały i mamy z tego w 5 godzin zrobić stronę internetowa lepsza od pozostałych. Ale nie to było najgorsze ;P Otóż oprogramowanie jakie mieliśmy to proste edytory tekstowe, MS Paint i GIMP :P (nic poza tym, nie dozwolone własne, nie dozwolone też własne materiały) i mieliśmy przy uzyciu tego stworzyć stronę ZGODNA z WZORCOWA specyfikacja HTMLa i CSSa (które też dostaliśmy w formie plikow) – nawet nie zdajecie sobie sprawy ile nieistniejących parametrów używacie, a ile obowiązkowych pomijacie… :P)… Koszmar -_-”

Dzisiaj, idac za ciosem postanowilem spradzic poprawnosc kodu swojego bloga… Otrzymalem wynik zaledwie 183 błędów (i niezgodności). Udało mi się doprowadzić go do zera, co potwierdziłem logo zgodności z HTML 4.01 na samym dole bloga. Blog jest też teraz prawie zgodny ze standardem CSS (1 błąd, a raczej użycie nieistniejącej opcji, aczkolwiek działa :P)
Dla porównania:
onet.pl – 156 błędów HTML, 19 błędów CSS
interia.pl – 34 bledy HTML, CSS w ogole nie dal sie sprawdzic
wp.pl – poprawny XHTML 1.0 oraz CSS :)
polchat.pl – 2667 błędów w HTMLu, CSS tu tez nie dziala
o2.pl – 219 bledow HTML, 4 bledy CSS

Jak widac, na ich tle moj blog wypada naprawde niezle ;P

PS. Zapomniałbym! Sama nasza strona konkursowa znajduje się tutaj.