Niquelao » Blogiarkisto » Toinen tyylikäs lisäys CSS-kurssiin

» Blogiarkisto » Toinen tyylikäs lisä CSS-kurssille Toinen tyylikäs lisä CSS-kurssille 11. marraskuuta 2009, kirjoittanut Rumoroso Kuten tein edellisessä merkinnässäni (tyylittelin edistyneen CSS-kurssin), aion jatkaa joidenkin niiden tyylien kommentointia, joita käytin CSS-kurssin esityksessä Zaragozaa varten. Tänään yksi nopea.

Tietyllä dialla minun piti luokitella ominaisuuksien luettelo. Tämä luettelo oli hieman liian pitkä mahtuakseen pystysuoraan näytölle (etenkään kun halusin lisätä samalle dialle vielä toisen luettelon), joten päätin tyylitellä sen rivimuotoon. Tarkoitukseni oli jälleen hyödyntää itse esitystä esimerkkinä (muistutan, että tein sen rumoslidella, joka on pohjimmiltaan XHTML:ää, CSS:ää ja javascriptiä) osoittaakseni, mitä tyylisivuilla voi saavuttaa. Alla on kyseinen luettelo.

Teen sen kuvana, jotta näette sen ulkoasun ilman tyylittelyä (se näyttää vain ne tyylit, joita Firefox soveltaa oletuksena): Käytetty HTML on yksinkertainen. Kyseessä on luettelo, jossa jokainen item koostuu code-elementistä, jonka sisällä on tekstiä:

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

…ja lopputulos, jonka halusin saada (ja jonka selvästikin sain), on seuraava (lisään jälleen kuvakaappauksen): Tuloksen saavuttamiseksi käytetyt tyylit ovat: code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } Ensimmäiseksi tyylittelin code-elementin, jotta se erottuisi muusta tekstistä.

Tätä varten leikin fontin koolla, sen kirjasinperheellä ja värillä. Kuten näkyy, kaikki hyvin yksinkertaista. Jotta alun perin pystysuora luettelo siirtyisi rivittyväksi, muutin itemien display-ominaisuuden arvoksi inline.

Sen jälkeen sain aikaan typografisen pilkun ja välilyönnin (”, ”) content-ominaisuuden avulla (generoitu sisältö). Sovelsin sitä :after-pseudoelementtiin. Lopuksi, koska tämä saa pilkun ilmestymään myös viimeiseen itemiin, määritin, että sen generoitu sisältö on tyhjä (content: ’ ’).

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

No niin, on selvää, että jossakin vielä mainitsemattomassa asiassa on ongelma, ja toivon, että joku on huomannut sen (ihanteellisesti joku kurssille osallistuneista opiskelijoista). Viimeisen itemin valitsemiseen käytin CSS 3:n :last-child-pseudoluokkaa, jonka tuki on hyvin vähäistä. Saatatte ajatella, että olisin voinut käyttää pelkästään CSS 2.1 -valitsimia. Esimerkiksi olisin voinut generoida sisällön ennen jokaista itemiä (jälkeen sijaan) käyttämällä :before ja valita sitten :first-child-valitsimella ensimmäisen itemin poistaakseni sen edessä olevan pilkun.

Miksi en tehnyt niin?… seuraavasta syystä: Pilkku asettuu jokaisen rivin alkuun, kun item sijoittuu kyseiseen kohtaan, mikä on selvästikin virheellistä. Tämän välttämiseksi ja tietäen, että käyttämäni selain tukee sitä, päätin käyttää CSS3:a… Tiedän, :last-child ei ole riittävän laajalti tuettu selainten keskuudessa, mutta ainakin aivan viimeisimmissä versioissa se on… ja esitykseen se sopi täydellisesti.

Kaiken tämän jaarittelun jälkeen voidaan vetää johtopäätös: CSS on minusta siistiä, ja se, että voin käyttää kurssin esitystä esimerkkinä, on vielä siistimpää. Tosin, pyydän,… selaimia, joissa on enemmän tukea, ja että CSS 3 saapuu pian. Jätän teille linkin pariin luetteloon, joissa eritellään CSS:n tuen taso selainkohtaisesti: http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html Muuten, esityksessä en malttanut olla käyttämättä hieman lisää CSS 3:a… selvästikään en voinut jättää joitakin kulmia pyöristämättä.

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

Seuraavassa artikkelissa kerron siitä… Toinen tyylikäs lisä CSS-kurssille Kategoria: CSS —> 2 kommenttia Tweets that mention Niquelao » Blogiarkisto » Toinen tyylikäs lisä CSS-kurssille — Topsy.com 12. marraskuuta 2009 […] Tämä postaus mainittiin Twitterissä käyttäjältä Jorge Rumoroso, Jorge Rumoroso. Jorge Rumoroso sanoi: #niquelao Another touch of style in the CSS Course http://bit.ly/J7vm9 (englanniksi se kuulostaa siistimmältä, eikö! […] Toinen tyylikäs lisä CSS-kurssille 12. marraskuuta 2009 […] Koko teksti Niquelaossa: Toinen tyylikäs lisä CSS-kurssille […] Voit seurata kommentteja RSS 2.0 -syötteen kautta.

Voit myös lähettää trackbackin sivustoltasi. Edellinen artikkeli: Edistyneen CSS-kurssin tyylittely Seuraava artikkeli: Useita taustakuvia CSS 3:lla —> —> —> 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.