Niquelao » Archiwum bloga » Ale będzie mądra!!

» Archiwum bloga » Ale będzie lista!! Niquelao - CSS Ale będzie lista!! 3 listopada 2006, autor: Maroto Cóż, nie jesteśmy do końca pewni, przynajmniej niektórzy z nas, inni zaś, jako że mają uraz do biednego navegador, nie dają mu już nawet najmniejszego kredytu zaufania.

My, mimo naszych głębokich standaryzacyjnych korzeni, damy mu jeszcze szansę. W miarę jak będziemy wszystko wyjaśniać, sami przechylicie się ku jednemu z dwóch obozów. Ostatnio mam w zwyczaju używać liczby mnogiej, jakby mój towarzysz, choć niekoniecznie przyjaciel, zgadzał się z tym, co mówię. Ten Rumo, ten Rumo, eh, eh!!.

A w czym problem? Cóż, na początek mamy listę uporządkowaną, typowe kroki do wykonania. Jak dotąd wszystko w porządku. Ale wykorzystując dobrodziejstwa CSS chcemy wyświetlić elementy listy w poziomie.

Gdy już dojdziemy do tego punktu, mamy kilka możliwości: nadać elementom listy właściwość display: inline, floatować elementy listy na bok, float: left. I już mamy pierwsze problemy: znaczniki listy (numery lub punktory) znikają, zawsze w IE, a czasem w FF. Co mówią Święte Pisma?

No i proszę, IE znowu zawodzi!! A co na to wszystko mówią Święte Pisma? Rzecz w tym, że w punkcie 12.5 specyfikacji CSS 2.1 jest wyraźnie powiedziane, że dla wizualnego układu list, elementy te mają właściwość taką, że: display: list-item, która generuje blok zawierający opcjonalny znacznik (numer lub punktor) oraz zawartość elementu.

Podobnie wszystkie właściwości dotyczące elementów listy mają pewne małe ograniczenie: stosują się tylko do elementów z display: list-item. To „opcjonalny” otwiera już wiele drzwi, tym bardziej jeśli chodzi o pewne osoby. Mając tę część Pism, mamy już rozwiązanie jednego z problemów: gdy tylko zadeklarujemy właściwość display: inline dla elementów listy, przestają na nie działać właściwości tych elementów (typ, pozycja, tło). Powtarzamy, specyfikacja jest jasna: tylko dla elementów z display: list-item.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

W poprzednim rozdziale specyfikacji CSS 2.1, konkretnie w rozdziale 9, poświęconym modelowi formatowania wizualnego, mamy punkt poświęcony relacji i reakcji elementów, gdy łączone są właściwości display, position i float (punkt 9.7). Ten temat bezpośrednio wpływa na reprezentację elementów, jak zobaczymy.

Ogólnie rzecz biorąc, mówi nam, że większość elementów, gdy zastosuje się do nich właściwość float, przechodzi również na display: block, z nielicznymi wyjątkami, w których wartość pozostaje taka sama jak określona, to znaczy nie zmienia się. Elementy mające właściwość display: list-item nie powinny się zmieniać. Jasne, że to mówi nam specyfikacja CSS 2.1. Specyfikacja CSS 2, obowiązująca Rekomendacja W3C, choć nie najczęściej używana, stosuje do wszystkich floatowanych elementów właściwość display: block.

Proszę bardzo, kto chce się chwycić rozgrzanego gwoździa, by bronić IE, niech się oprze na tej przesłance. Co mogę zrobić, żeby wyglądało tak samo w obu przeglądarkach? Po raz kolejny nie znaleźliśmy żadnego hacka, który by to rozwiązał, ale jako że jesteśmy gośćmi z pomysłami, damy wam kilka wskazówek. usunąć znacznik we wszystkich przypadkach: list-style: none; usunąć znacznik we wszystkich przypadkach i dodać tekst, który go zastąpi, oczywiście jeśli ma to sens.

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Używanie numerów w liście uporządkowanej sprawi nam problemy, gdy nie będziemy mieli wsparcia dla CSS. Jeśli dołączymy numer do tekstu, zawsze damy lepszy obraz. (Krok 1, Krok 2, itd.). usunąć znacznik we wszystkich przypadkach i dodać obraz tła za pomocą arkusza stylów.

To rozwiązanie zwiększy znaczniki w przypadku używania numerów, ponieważ będziemy musieli zadeklarować obraz dla każdego z nich. Kilka ciekawostek… Czy wiesz, że jeśli zastosuje się wartość display: inline do elementu ol, nasz przyjaciel FF inicjalizuje wszystkie znaczniki listy na 0?

Coś podobnego dzieje się z IE, jeśli elementom listy uporządkowanej nada się szerokość (width). W tym przypadku wszystkie znaczniki inicjalizują się na 1. Odniesienia Specyfikacja CSS 2.1 Specyfikacja HTML 4.01 Kategoria: CSS, (X)HTML —> 2 komentarze Lector anómino 7 listopada 2006 Uważam, że jest mały kontrast między kolorem tła a pierwszego planu niektórych elementów. Rumoroso 7 listopada 2006 Jeśli nam wskażesz które, będziemy mogli to sprawdzić.

Możesz śledzić komentarze dzięki kanałowi RSS 2.0. Możesz też zostawić komentarz lub wysłać trackback ze swojej strony. Poprzedni artykuł: Przechodzę na ciemną stronę Następny artykuł: Ja też to widziałem… Zostaw swój komentarz Pola Nazwa i Email są obowiązkowe Dodaj nas do…

Tagi, które wyróżniamy ogólnie dostępność wiedza CSS standardy fieldset Firefox format formularz czcionki hidden ie IE 7 informacja javascript legend lista niquelando obowiązkowe opera xhtml

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.