Niquelao » 網誌存檔 » 不過，她會是聰明的!!

» Arxiu del weblog » Però, serà llista!! Niquelao - CSS Però, serà llista!! 3 de Novembre, 2006 per Maroto Doncs no n’estem gaire segurs, alguns almenys, altres, com que tenen creuat el pobre navegador ja no li donen ni el més mínim vot de confiança.

Nosaltres, malgrat les nostres profundes arrels estandardistes, li deixarem el benefici del dubte. A mesura que ens vagi explicant us decantareu per una de les dues vessants. Últimament em dona per utilitzar el plural, com si el meu company, que no per això amic, estigués d’acord amb el que dic. Aquest Rumo, aquest Rumo, eh, eh!!. I quin és el problema?

Bé, per començar tenim una llista ordenada, els típics passos a seguir. Fins ara, tot correcte. Però aprofitant les bondats de CSS volem oferir els elements de llista de forma horitzontal.

Un cop arribats a aquest punt, tenim diverses possibilitats: donar als elements de la llista la propietat display: inline flotar els elements de la llista a un costat, float: left Ja tenim els primers problemes: els marcadors de la llista (números o boles) desapareixen, sempre amb IE i algunes vegades amb FF . Què diuen les Sagrades Escriptures? Ja està, l’IE que torna a fallar!!

I què diuen les Sagrades Escriptures a tot això?. El cas és que a l’apartat 12.5 de l’especificació de CSS 2.1 diu clarament que per a la disposició visual de les llistes, aquests elements tenen una propietat tal que: display: list-item que genera una caixa de bloc que al seu torn conté un marcador opcional (número o bola) i el contingut de l’element.

Així mateix, totes les propietats que afecten els elements de llista tenen una petita restricció: només s’apliquen a elements amb display: list-item . El d’opcional ja deixa moltes portes obertes, i més si es tracta de certes persones. Amb aquesta part de les escriptures ja tenim la solució a un dels problemes: quan declarem la propietat display: inline als elements de llista, ja no els afecten les propietats d’aquests elements (tipus, posició, fons). Repetim, l’especificació és clara: només per a elements amb display: list-item .

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

En un capítol anterior de l’especificació CSS 2.1, concretament el capítol 9 , dedicat al model de format visual, tenim un apartat dedicat a la relació i reacció dels elements quan es combinen les propietats display , position i float ( apartat 9.7 ). Aquest tema afecta directament la representació dels elements, com veurem.

En línies generals, ens ve a dir que la majoria d’elements quan se’ls aplica la propietat float , passen a tenir també display: block , excepte comptades ocasions, en les quals el valor segueix sent igual que l’especificat, és a dir, que no canvia. Els elements que tenen la propietat display: list-item no haurien de canviar. Clar que això és el que ens diu l’especificació de CSS 2.1. L’especificació de CSS 2, Recomanació W3C vigent, tot i que no la més usada, aplica a tots els elements flotats la propietat display: block .

Aquí ho tenen, el que vulgui un clau ardent al qual subjectar-se per defensar IE no té més que basar-se en aquesta premissa. Què puc fer perquè es vegi igual en tots dos navegadors? Una vegada més, no hem trobat cap hack per solucionar-ho, però com que som uns tios amb recursos us donarem unes quantes idees. eliminar el marcador en tots els casos: list-style: none eliminar el marcador en tots els casos i afegir text que el substitueixi, això sí, si ve al cas.

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

Utilitzar números en una llista ordenada ens causarà problemes quan no tinguem suport per a CSS . Si acompanyem el número amb text sempre donarem una millor imatge. (Pas 1, Pas 2, etc). eliminar el marcador en tots els casos i afegir una imatge de fons mitjançant el full d’estils.

Aquesta solució farà que augmenti el marcatge en cas d’utilitzar números, ja que haurem de declarar una imatge per a cadascun d’ells. Un parell de curiositats … Saps que si s’aplica el valor display: inline a l’element ol el nostre amic FF inicialitza tots els marcadors de llista a 0 ?

Una cosa similar li passa a IE si als elements d’una llista ordenada se’ls dona una amplada ( width ). En aquest cas tots els marcadors s’inicialitzen a 1 . Referència Especificació CSS 2.1 Especificació HTML 4.01 Categoria: CSS, (X)HTML —> 2 comentaris Lector anònim 7 de Novembre de 2006 Crec que hi ha poc contrast entre el color de fons i de primer pla de certs elements. Rumorós 7 de Novembre de 2006 Si ens indiques quins podrem revisar-ho.

Pots fer un seguiment dels comentaris gràcies al feed RSS 2.0 . També podries deixar un comentari , o enviar un trackback des del teu lloc. Article anterior: Me paso al lado oscuro Article següent: Yo también lo he visto… Deixa el teu comentari Els camps Nom i Email són obligatoris Afegeix-nos a…

Tags que destaquem en general accessibilitat coneixement CSS estàndards fieldset Firefox format formulari fonts hidden ie IE 7 informació javascript legend llista niquelando obligatori 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.