Siirry pääsisältöön
Niquelao Verkkosaavutettavuus ja front-end-kehitys suomeksi: WCAG-standardit, saavutettavat widgetit ja Firefox-laajennukset, selitettynä oikealla koodilla.

Osa tämän sivuston linkeistä on affiliate-linkkejä: jos ostat niiden kautta, saatamme ansaita provision ilman lisäkustannuksia sinulle. Tämä ei koskaan vaikuta suosituksiimme. Katso lisätiedot affiliate-selosteestamme. Kumppanuusilmoitus.

Niquelao » Blogiarkisto » Mutta onpa tyhmä!!

» Blogiarkisto » Mutta onko se lista!! Niquelao - CSS Mutta onko se lista!! 3. marraskuuta 2006, kirjoittaja Maroto No, emme ole aivan varmoja, ainakaan jotkut meistä; toiset taas suhtautuvat siihen kuin petettyihin kumppaneihin eivätkä anna sille enää pienintäkään luottamuksen osoitusta.

Me puolestamme, syvistä standardiuskonnollisista juuristamme huolimatta, annamme sille vielä mahdollisuuden. Kun selitämme asiaa eteenpäin, te lukijat kallistutte jompaankumpaan leiriin. Viime aikoina minulla on ollut tapana käyttää monikkoa, ikään kuin kollegani – ei kuitenkaan ystäväni – olisi samaa mieltä kanssani. Se Rumo, se Rumo, heh heh!!

Ja mikä sitten on ongelma? No, aluksi meillä on järjestetty lista, tyypilliset vaiheet, joita seurataan. Toistaiseksi kaikki on kunnossa. Mutta hyödyntääksemme CSS:n ominaisuuksia haluamme esittää listan elementit vaakasuunnassa.

Tässä vaiheessa meillä on useita vaihtoehtoja: antaa listan elementeille ominaisuus display: inline tai kelluttaa listan elementit sivulle, float: left Ensimmäiset ongelmat ovat jo käsillä: listan merkinnät (numerot tai luettelomerkit) katoavat – aina IE:llä ja joskus FF:llä . Mitä Pyhät Kirjoitukset sanovat? No niin, IE taas kerran pettää!!

Ja mitä Pyhät Kirjoitukset sanovat tähän kaikkeen? Joka tapauksessa CSS 2.1 -spesifikaation kohdassa 12.5 sanotaan selvästi, että listojen visuaalista esittämistä varten näillä elementeillä on ominaisuus: display: list-item joka luo lohkolaatikon, joka puolestaan sisältää valinnaisen merkinnän (numeron tai luettelomerkin) ja elementin sisällön.

Samoin kaikilla listan elementteihin vaikuttavilla ominaisuuksilla on pieni rajoitus: niitä sovelletaan vain elementteihin, joilla on display: list-item . Sana “valinnainen” jättää jo monta ovea avoimeksi, varsinkin tiettyjen tahojen kohdalla. Tämän kirjoitusten osan perusteella meillä on jo ratkaisu yhteen ongelmaan: heti kun määritämme listan elementeille ominaisuuden display: inline, niiden elementtien ominaisuudet (tyyppi, sijainti, tausta) eivät enää vaikuta niihin. Toistamme: spesifikaatio on selvä – vain elementeille, joilla on display: list-item .

Related: con plan gratuito para empezar hoy mismo.

CSS 2.1 -spesifikaation aiemmassa luvussa, tarkemmin luvussa 9 , joka on omistettu visuaaliselle muotoilumallille, on osio, joka käsittelee elementtien välistä suhdetta ja käyttäytymistä, kun ominaisuudet display , position ja float yhdistetään ( osio 9.7 ). Tämä aihe vaikuttaa suoraan elementtien esittämiseen, kuten tulemme näkemään.

Yleisesti ottaen se kertoo meille, että useimmat elementit saavat ominaisuuden float yhteydessä myös display: block, paitsi harvoissa tapauksissa, joissa arvo pysyy samana kuin määritetty, eli se ei muutu. Elementtien, joilla on ominaisuus display: list-item, ei pitäisi muuttua. Tietenkin tämä on se, mitä CSS 2.1 -spesifikaatio kertoo meille. CSS 2 -spesifikaatio, voimassa oleva W3C-suositus, vaikka ei kaikkein käytetyin, soveltaa kaikkiin kellutettuihin elementteihin ominaisuutta display: block .

Siinä se on: jos joku haluaa hehkuvan naulan, johon tarttua puolustaakseen IE:tä, hänen tarvitsee vain nojata tähän lähtökohtaan. Mitä voin tehdä, jotta se näkyy samalla tavalla molemmissa selaimissa? Jälleen kerran emme ole löytäneet mitään hackia sen ratkaisemiseksi, mutta koska olemme kekseliäitä kavereita, annamme teille muutamia ideoita. poista merkintä kaikissa tapauksissa: list-style: none poista merkintä kaikissa tapauksissa ja lisää sen korvaava teksti – tosin vain jos se on tarpeen.

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

Numeroiden käyttäminen järjestetyssä listassa aiheuttaa ongelmia, kun CSS-tukea ei ole . Jos liitämme numeroon tekstiä, annamme aina paremman kuvan. (Vaihe 1, Vaihe 2 jne.). poista merkintä kaikissa tapauksissa ja lisää taustakuva tyylitiedoston avulla.

Tämä ratkaisu lisää merkintöjen määrää, jos käytetään numeroita, koska meidän on määritettävä kuva jokaiselle niistä. Pari uteliaisuutta … Tiesitkö, että jos elementille ol sovelletaan arvoa display: inline, ystävämme FF alustaa kaikki listan merkinnät arvoon 0 ?

Jotain vastaavaa tapahtuu IE:lle, jos järjestetyn listan elementeille annetaan leveys ( width ). Tässä tapauksessa kaikki merkinnät alustetaan arvoon 1 . Viite CSS 2.1 -spesifikaatio HTML 4.01 -spesifikaatio Kategoria: CSS, (X)HTML —> 2 kommenttia Lector anómino 7. marraskuuta 2006 Mielestäni tiettyjen elementtien taustavärin ja etualan värin välillä on liian vähän kontrastia. Rumoroso 7. marraskuuta 2006 Jos kerrot meille mitkä, voimme tarkistaa ne.

Voit seurata kommentteja RSS 2.0 -syötteen kautta . Voit myös jättää kommentin tai lähettää trackbackin sivustoltasi. Edellinen artikkeli: Siirryn pimeälle puolelle Seuraava artikkeli: Minäkin olen nähnyt sen… Jätä kommenttisi Kentät Nimi ja Sähköposti ovat pakollisia Lisää meidät…

Tunnisteet, joita korostamme yleisesti saavutettavuus tietämys CSS standardit fieldset Firefox muoto lomake fontit hidden ie IE 7 tieto javascript legend lista niquelando pakollinen opera xhtml

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas