Niquelao » Bloggarkiv » Plassproblemer og pseudo

» Arkiv for webloggen » Plassproblemer og pseudo-elementer Niquelao - CSS Plassproblemer og pseudo-elementer 7. september 2006 av Maroto Det er rart å oppdage en feil av denne typen, altså en fullstendig bagatell som du enten ikke har mulighet til å finne, eller så er det ren tilfeldighet at du i det hele tatt legger merke til den. Og da er det selvfølgelig for sent.

Det er allerede skrevet om det samme for over ett år siden på Maxgeek , Satzansatz og sikkert flere andre steder også. La oss komme til saken. Hva skjer egentlig? Når vi bruker pseudo-elementene definert i CSS 2.1-spesifikasjonen :first-letter og :first-line (vi ser bort fra pseudo-elementet :first-child og lignende, siden vår venn IE bryr seg lite om dem), kan vi observere at vi noen ganger ikke får de forventede resultatene.

Hva er problemet? Uforklarlig nok svikter IE når det gjelder tolkning av CSS-syntaks . Hvis vi umiddelbart etter disse pseudo-elementene bruker krøllparentesen ( { ) for å starte deklarasjonen vår uten å legge inn et mellomrom mellom dem, klarer ikke IE å tolke det.

Du kan se dette i eksempel én . p:first-line { color: blue; font-weight: bold; } Det samme skjer hvis vi prøver å angi felles egenskaper for flere elementer i én og samme deklarasjon, der elementene er adskilt med komma ( , ). Du kan se dette i eksempel to . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Og løsningen, finnes det egentlig en løsning? I dette tilfellet gjør det det, og den er relativt enkel.

Legg ganske enkelt inn et mellomrom mellom pseudo-elementet og symbolet du skal bruke, enten det er komma ( , ) eller krøllparentes ( { ). Hvis du ikke tror på det, her har du eksempel tre . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Hei!

Her slutter det ikke! Et annet lite problem vi støter på, handler om lister. Og hva skjer nå? Hvis vi anvender en stil på pseudo-elementet :first-letter for listeelementer, vil IE hyggelig nok arve dette ned til selve listemerket (kulepunkt ved usorterte lister, tall eller bokstav ved sorterte lister).

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

Utrolig, ikke sant? Se eksempel fire . Og hva er løsningen på dette rotet? Hvis du godtar blekksprut som kjæledyr, kan vi si at løsningen er å fjerne listemerker ved hjelp av: li {list-style:none} Hvis ikke, ja da er det bare å akseptere situasjonen.

En annen liten detalj uten særlig betydning, er at IE7b2 ikke bryr seg om det mangler mellomrom mellom pseudo-elementet og tegnet { . Det gjør derimot dens lillebror, så la oss respektere hans personlige rom. Og mens vi er i gang, hva med spesifisiteten? Vel, hva skal jeg si, iallfall ikke noe spesielt med IE .

Først og fremst må vi vite at disse pseudo-elementene kun (og det er ikke lite) påvirker blokk-nivå-elementer. Ok, hvis vi definerer noen egenskaper for for eksempel et avsnitt, og deretter definerer andre egenskaper for et annet avsnitt som befinner seg inne i et sitatblokk-element ( blockquote ), vil begge avsnittene få de samme egenskapene (selvfølgelig, forutsatt at vi husket å legge inn det nødvendige mellomrommet mellom pseudo-elementet og dets fantastiske symbol). Alt oppsummert i det siste eksempelet .

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

Og løsningen? Siden jeg er blitt trøtt i dag, får du finne den selv. Kategori: CSS —> Du kan følge kommentarer via RSS 2.0-feeden . Du kan også legge igjen en kommentar , eller sende en trackback fra din egen nettside.

Forrige artikkel: Finpussing av skjemaer (episode I) Neste artikkel: Vi lanserer Asides Legg igjen din kommentar Feltene Navn og E-post er obligatoriske Legg oss til… Tags vi gjerne fremhever generelt tilgjengelighet bert bos blockquote feil øl sitater cite oppførsel kunnskap CSS standarder fieldset Firefox format skjema skrifter hidden ie IE 7 informasjon javascript legend liste niquelando obligatorisk opera strand q squash ferie w3c WCAG xhtml Dette verket er lisensiert under en Creative Commons-lisens .

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.