Niquelao » Blogarkiv » Et ekstra stilistisk touch på CSS-kurset

» Weblog-arkiv » Et nyt stilistisk touch til CSS-kurset Niquelao Et nyt stilistisk touch til CSS-kurset 11. november 2009, af Rumoroso Som jeg allerede gjorde i det tidligere indlæg (stilisering af kurset i Avanceret CSS ), vil jeg fortsætte med at kommentere nogle af de stilelementer, jeg brugte i præsentationen af CSS-kurset i Zaragoza. I dag et hurtigt eksempel.

På et bestemt dias skulle jeg kategorisere en liste over egenskaber. Listen blev lidt for lang til at kunne vises lodret på skærmen (især når jeg også wanted at tilføje endnu en liste på samme dias), så jeg besluttede at style den inline . Igen var min hensigt at bruge selve præsentationen som eksempel (jeg minder om, at jeg lavede den med rumoslide , som dybest set er XHTML, CSS og JavaScript) for at demonstrere, hvad man kan opnå med stylesheets. Nedenfor viser jeg den pågældende liste.

Jeg viser den som et billede, så man kan se, hvordan den ser ud uden stil (den viser kun de standardstile, som Firefox anvender ): Den anvendte HTML er enkel. Det er en liste, hvor hvert element består af et code-element med tekst indeni:

• border-collapse
• border-spacing
• caption-side
• color
…
• widows
• word-spacing

…og resultatet, jeg ønskede (og naturligvis opnåede), er følgende (igen inkluderer jeg et skærmbillede): De stilelementer, der blev brugt til at opnå dette resultat, er: code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } Det første, jeg gjorde, var at style code-elementet for at kunne skelne det fra resten af teksten.

Til dette legede jeg med skriftstørrelse, skrifttypefamilie og farve . Som du kan se, alt meget simpelt. For at få listen, der oprindeligt var lodret, til at blive vandret, ændrede jeg display-egenskaben for listeelementerne til inline .

Derefter fik jeg et typografisk komma og et mellemrum (”, ”) til at vise sig ved hjælp af content-egenskaben (genereret indhold ). Denne anvendte jeg på pseudo-elementet :after .

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

Endelig, da dette får kommaet til også at vise sig efter det sidste element, sørgede jeg for, at det genererede indhold for dette element var tomt ( content: ’ ’ ). Okay, det er tydeligt, at der er et problem med noget, jeg endnu ikke har omtalt, og som jeg håber, nogen har lagt mærke til (ideelt set en eller flere af kursisterne). For at vælge det sidste element brugte jeg pseudoklassen :last-child fra CSS 3 , hvis understøttelse stadig er meget begrænset. I vil måske tænke, at jeg bare kunne have brugt udelukkende selektorer fra CSS 2.1 .

Jeg kunne for eksempel have genereret indholdet før hvert element (i stedet for efter) ved hjælp af :before og derefter vælge det første element med :first-child for at fjerne kommaet foran. Hvorfor gjorde jeg ikke det?… af følgende årsag: Kommaet ville komme i begyndelsen af hver linje, når et element placeres dér, hvilket naturligvis er forkert .

For at undgå dette, og vel vidende at den browser, jeg skulle bruge, understøttede det, besluttede jeg at bruge CSS3… Jeg ved det godt, :last-child er ikke bredt understøttet blandt browsere, men i hvert fald i de allerseneste versioner er den det… og til præsentationen fungerede den perfekt. Efter hele denne snak kan man drage én konklusion: Jeg elsker CSS, og muligheden for at bruge kursuspræsentationen som eksempel gør det endnu sjovere . Men please,… flere browsere med bedre understøttelse, og lad CSS 3 komme snart .

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

Her er links til et par lister, der beskriver graden af CSS-understøttelse afhængigt af browser: http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html For resten, i præsentationen kunne jeg ikke lade være og brugte lidt mere CSS 3… naturligvis kunne jeg ikke undlade at afrunde nogle hjørner . I en næste artikel fortæller jeg mere om det… Et nyt stilistisk touch til CSS-kurset Kategori: CSS —> 2 kommentarer Tweets, der nævner Niquelao » Weblog-arkiv » Et nyt stilistisk touch til CSS-kurset — Topsy.com 12. november 2009 […] Dette indlæg blev omtalt på Twitter af Jorge Rumoroso, Jorge Rumoroso.

Jorge Rumoroso sagde: #niquelao Another touch of style in the CSS Course http://bit.ly/J7vm9 (det lyder coolere på engelsk, ikke sandt! […] Et nyt stilistisk touch til CSS-kurset 12. november 2009 […] Fuld tekst på Niquelao: Et nyt stilistisk touch til CSS-kurset […] Du kan følge kommentarerne via RSS 2.0-feedet . Du kan også sende et trackback fra dit eget websted. Forrige artikel: Stilisering af kurset i Avanceret CSS Næste artikel: Flere baggrundsbilleder med CSS 3 —> —> —> Dette værk er licenseret under en Creative Commons-licens .

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.