Niquelao » Webblogsarkiv » Men, så smart!!

» Arkiv för webloggen » Men, hon är ju listig!! Niquelao - CSS Men, hon är ju listig!! 3 november 2006 av Maroto Tja, vi är inte helt säkra, åtminstone inte alla.

Andra, som redan har gett den stackars webbläsaren en känga, litar inte längre ett dugg på den. Vi, trots våra djupa rötter som standardivrare, kommer att ge den fördelen av tvivel. Efterhand som vi förklarar oss kommer ni att luta er åt ena eller andra håll. På sistone har jag fått för mig att använda pluralform, som om min kollega – som dock inte nödvändigtvis är min vän – höll med om det jag säger.

Den där Rumo, den där Rumo, eh, eh!! Och vad är då problemet? Jo, till att börja med har vi en sorterad lista, de vanliga stegen att följa. Hittills är allt korrekt.

Men genom att utnyttja CSS:s möjligheter vill vi presentera listelementen horisontellt. När vi kommit så långt finns flera alternativ: ge listelementen egenskapen display: inline låta listelementen flyta åt sidan, float: left Här uppstår de första problemen: listmarkörerna (siffror eller punkter) försvinner, alltid i IE och ibland även i FF. Vad säger den Heliga Skriften?

Javisst, det är IE som sviker igen!! Och vad säger egentligen den Heliga Skriften om detta? I avsnitt 12.5 i specifikationen för CSS 2.1 står det tydligt att för den visuella layouten av listor har dessa element en egenskap enligt följande: display: list-item vilket genererar en blockruta som i sin tur innehåller en valfri markör (siffra eller punkt) samt elementets innehåll.

Dessutom gäller en mindre begränsning för alla egenskaper som påverkar listelement: de tillämpas endast på element med display: list-item. Att det står “valfri” lämnar många dörrar öppna, särskilt när vissa personer är inblandade. Med detta utdrag från skrifterna har vi redan lösningen på ett av problemen: så snart vi deklarerar egenskapen display: inline för listelementen påverkas de inte längre av egenskaper specifika för listelement (såsom typ, position, bakgrund). Vi upprepar: specifikationen är tydlig – detta gäller endast element med display: list-item.

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

I ett tidigare kapitel i specifikationen CSS 2.1, närmare bestämt kapitel 9, som ägnas åt den visuella formatteringsmodellen, finns ett avsnitt som behandlar relationen och interaktionen mellan element när egenskaperna display, position och float kombineras (avsnitt 9.7). Detta ämne påverkar direkt hur element renderas, vilket vi ska se nedan.

Generellt innebär det att de flesta element, när egenskapen float tillämpas, också får display: block, med undantag för några få fall där värdet förblir oförändrat, det vill säga samma som det angivna ursprungliga värdet. Element som har egenskapen display: list-item bör inte ändras. Självklart är detta vad specifikationen för CSS 2.1 säger. Specifikationen för CSS 2, den gällande W3C-rekommendationen (även om den inte är den mest använda), tillämpar egenskapen display: block på alla flytande element.

Där har ni det; den som behöver en halmstrå att klamra sig fast vid för att försvara IE kan helt enkelt hänvisa till denna premiss. Vad kan jag göra för att det ska se likadant ut i båda webbläsarna? Återigen har vi inte hittat någon hack-lösning, men eftersom vi är resursstarka tänker vi ge er några idéer. ta bort markören i alla fall: list-style: none ta bort markören i alla fall och lägga till ersättande text, om det passar situationen. Att använda siffror i en sorterad lista kommer att skapa problem när CSS-stöd saknas.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Om vi kombinerar siffran med text ger det alltid ett bättre intryck (Steg 1, Steg 2 osv.). ta bort markören i alla fall och lägga till en bakgrundsbild via stilmallen. Denna lösning ökar mängden markup om siffror används, eftersom vi måste deklarera en separat bild för varje enskild siffra. Ett par kuriositeter … Visste du att om värdet display: inline tillämpas på elementet ol, så initierar vår vän FF alla listmarkörer till 0?

Något liknande händer i IE om elementen i en sorterad lista tilldelas en bredd (width). I detta fall initieras alla markörer till 1. Referens Specifikation CSS 2.1 Specifikation HTML 4.01 Kategori: CSS, (X)HTML —> 2 kommentarer Anonym läsare 7 november 2006 Jag tycker att kontrasten mellan bakgrundsfärg och förgrundsfärg är för svag för vissa element.

Rumoroso 7 november 2006 Om du anger vilka element det gäller kan vi granska dem. Du kan följa kommentarerna via RSS 2.0-flödet. Du kan också lämna en kommentar eller skicka en trackback från din webbplats. Föregående artikel: Jag byter sida till den mörka sidan Nästa artikel: Jag har också sett det… Lämna din kommentar Fälten Namn och E-post är obligatoriska Lägg till oss i…

Taggar som vi lyfter fram i allmänhet tillgänglighet kunskap CSS standarder fieldset Firefox format formulär typsnitt hidden ie IE 7 information javascript legend lista niquelando obligatorio opera xhtml

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.