Niquelao » Blogiarkisto » Tilaongelmat ja pseudot

» Blogiarkisto » Ongelmia tilan ja pseudoelementtien kanssa Niquelao - CSS Ongelmia tilan ja pseudoelementtien kanssa 7. syyskuuta 2006, kirjoittanut Maroto On outoa löytää tällainen bugi, eli sellainen vitun pikku juttu, jonka joko huomaa ihan sattumalta tai sitten ei ollenkaan. Ja vieläpä myöhään.

Samasta asiasta on kirjoitettu jo yli vuosi sitten Maxgeekissä, Satzansatzissa ja varmaan jossain muuallakin. Asiaan. Mikä siis on ongelma? Kun käytämme CSS 2.1 -spesifikaatiossa määriteltyjä pseudoelementtejä :first-letter ja :first-line (jätetään :first-child ja vastaavat pois laskuista, koska ystävämme IE ei niistä juuri välitä), voimme todeta, että joskus emme saa odotettuja tuloksia.

Mikä siis on ongelma? Käsittämättömästi IE epäonnistuu CSS-syntaksin tulkinnassa. Jos näiden pseudoelementtien jälkeen käytämme aaltosuljetta ( { ) aloittaaksemme määrittelyn ilman välilyöntiä niiden välissä, IE ei tulkitsi sitä.

Voit nähdä sen esimerkissä yksi . p:first-line { color: blue; font-weight: bold; } Sama tapahtuu, jos yritämme antaa yhteisiä ominaisuuksia usealle elementille samassa määrittelyssä, jossa ne on erotettu pilkuilla ( , ). Voit nähdä sen esimerkissä kaksi . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Ja ratkaisu, jos sellainen olisi olemassa? Tässä tapauksessa se on olemassa ja on suhteellisen helppo.

Jätä yksinkertaisesti välilyönti pseudoelementin ja käytettävän symbolin väliin, olipa se sitten pilkku ( , ) tai aaltosulje ( { ). Jos et usko, tässä on esimerkki kolme . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Hei!!

Tähän ei vielä lopu! Toinen pieni ongelma tulee listojen mukana. Ja nyt, mikä on ongelma? Jos käytämme :first-letter-pseudoelementtiä listaelementteihin, IE levittää sen mukavasti itse listaelementin merkkiin (bullet, jos lista on järjestämätön, numero tai kirjain, jos lista on järjestetty).

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Epäuskoinen, katso esimerkki neljä . Ja ratkaisu tähän sotkuun? Jos hyväksyt mustekalan lemmikkieläimeksi, sanotaan, että poistamalla listojen merkit komennolla: li {list-style:none} Jos ei, niin ei sitten.

Toinen merkityksetön yksityiskohta on, että IE7b2:lle on aivan sama, onko pseudoelementin ja merkin { välissä välilyöntiä. Sen pikkuveljelle sillä sen sijaan on väliä, joten kunnioitetaan sen elintilaa. Ja vielä, mitä tapahtuu spesifisyydelle? No mitäpä siinä, ei yhtään mitään, ainakaan IE:n kanssa .

Ensinnäkin meidän on tiedettävä, että nämä pseudoelementit vaikuttavat vain (mikä ei ole vähän) lohkotason elementteihin. No, jos määrittelemme ominaisuuksia esimerkiksi kappaleelle ja sen jälkeen määrittelemme muita ominaisuuksia toiselle kappaleelle, joka esiintyy lainauslohkon ( blockquote ) sisällä, saamme samat ominaisuudet molemmille kappaleille (tietenkin, jos olemme muistaneet jättää tarvittavan välilyönnin pseudoelementin ja sen ihanan symbolin väliin. Kaikki tiivistettynä viimeisessä esimerkissä .

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

Ja ratkaisu? Koska olen jo väsynyt tänään, etsi se itse. Kategoria: CSS —> Voit seurata kommentteja RSS 2.0 -syötteen kautta . Voit myös jättää kommentin , tai lähettää trackbackin sivustoltasi.

Edellinen artikkeli: Retocando Formularios (episodio I) Seuraava artikkeli: Estrenamos Asides Jätä kommenttisi Kentät Nimi ja Sähköposti ovat pakollisia Lisää meidät… Tunnisteet, joita korostamme yleisesti saavutettavuus bert bos blockquote bug cañas citas cite käyttäytyminen tietämys CSS escuas standardit fieldset Firefox muoto lomake fontit hidden ie IE 7 tieto javascript legend lista niquelando pakollinen opera playa q squash loma w3c WCAG xhtml Tämä teos on lisensoitu Creative Commons -lisenssillä .

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