Niquelao » Archiwum bloga » Kolejny akcent stylistyczny w Kursie CSS

Ta lista była nieco zbyt długa, by zmieścić ją w pionie na ekranie (zwłaszcza gdy chciałem dodać jeszcze jedną listę na tym samym slajdzie), więc postanowiłem wystylizować ją w linii . Ponownie moim zamiarem było wykorzystanie samej prezentacji jako przykładu (przypominam, że zrobiłem ją za pomocą rumoslide , który jest w zasadzie XHTML, CSS i javascriptem), by pokazać, co można osiągnąć za pomocą arkuszy stylów.

Poniżej zamieszczam omawianą listę. Robię to w formie obrazka, żeby było widać jej wygląd bez stylowania (pokazuje wyłącznie style, które Firefox stosuje domyślnie ): Użyty HTML jest prosty. To lista, w której każdy element składa się z elementu code z tekstem w środku:

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

…a wynik, który chciałem uzyskać (i który oczywiście uzyskałem), jest następujący (ponownie zamieszczam zrzut ekranu): Style użyte do osiągnięcia tego wyniku to: code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } Pierwszą rzeczą, którą zrobiłem, było wystylizowanie elementu code, żeby móc odróżnić go od reszty tekstu.

W tym celu pobawiłem się rozmiarem czcionki, jej rodziną i kolorem . Jak widać, wszystko bardzo proste. Aby lista początkowo w pionie przeszła do wyrównania w linii, zmieniłem właściwość display elementów na inline .

Następnie sprawiłem, że pojawił się przecinek typograficzny i spacja („, ”) za pomocą właściwości content ( treść generowana ). Zastosowałem ją na pseudoelemencie :after . Wreszcie, ponieważ powoduje to pojawienie się przecinka również w ostatnim elemencie, wskazałem, że jego generowana treść ma być pusta ( content: ’ ’ ).

No tak, oczywiste jest, że jest pewien haczyk w czymś, o czym jeszcze nie wspomniałem i mam nadzieję, że ktoś to zauważył (idealnie któryś z uczniów/uczennic obecnych na kursie). Do wybrania ostatniego elementu użyłem pseudoklasy :last-child z CSS 3 , której wsparcie jest bardzo mało rozpowszechnione.

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

Pomyślicie, że mogłem użyć wyłącznie selektorów z CSS 2.1 . Na przykład mogłem wygenerować treść przed każdym elementem (zamiast po nim), używając :before, a następnie wybrać za pomocą :first-child pierwszy element, żeby usunąć przecinek z przodu. Dlaczego tego nie zrobiłem?… z powodu następującego: Przecinek umieszczany jest na początku każdej linii, gdy element znajduje się w tej pozycji, co jest oczywiście niepoprawnością . Aby tego uniknąć, wiedząc, że przeglądarka, której zamierzałem użyć, ma na to wsparcie, postanowiłem zastosować CSS3… Wiem, :last-child nie jest wystarczająco rozpowszechnione wśród przeglądarek, ale przynajmniej w najnowszych wersjach tak… i do prezentacji posłużyło mi doskonale.

Po całym tym wywodzie można wyciągnąć jeden wniosek: CSS mnie kręci, a możliwość użycia prezentacji kursu jako przykładu kręci mnie jeszcze bardziej . To tyle, proszę,… przeglądarki z większym wsparciem i żeby CSS 3 przyszło szybko .

Zostawiam wam link do kilku list, w których szczegółowo opisano stopień wsparcia CSS w zależności od przeglądarki: http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html A propos, w prezentacji nie mogłem się powstrzymać i użyłem trochę więcej CSS 3… oczywiście nie mogłem zostać bez zaokrąglenia niektórych narożników . W następnym artykule o tym opowiem… Kolejny akcent stylistyczny w Kursie CSS Kategoria: CSS —> 2 komentarze Tweets that mention Niquelao » Archiwum bloga » Kolejny akcent stylistyczny w Kursie CSS — Topsy.com 12 listopada 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Jorge Rumoroso.

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

Jorge Rumoroso said: #niquelao Another touch of style in the CSS Course http://bit.ly/J7vm9 (en inglés parece más cool, verdad! […] Kolejny akcent stylistyczny w Kursie CSS 12 listopada 2009 […] Texto completo en Niquelao: Otro toque de estilo en el Curso de CSS […] Możesz śledzić komentarze dzięki kanałowi RSS 2.0 . Możesz także wysłać trackback ze swojej strony. Poprzedni artykuł: Stylując kurs Zaawansowanego CSS Następny artykuł: Wiele obrazów tła z CSS 3 —> —> —> Ta praca jest objęta licencją Creative Commons .

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.