CSS4 już na warsztacie W3C: nowe arkusze stylów z wieloma udogodnieniami

Jeszcze producenci przeglądarek nie uporali się z kompletną implementacją CSS3, a już W3C pracuje nad następną wersją standardu kaskadowych arkuszy stylów. Z opublikowanych właśnie szkiców prac możemy co nieco dowiedzieć się o nowościach, które Konsorcjum WWW szykuje dla webdeweloperów.

Bardzo ciekawym rozwiązaniem jest wprowadzenie selektora rodzica. Załóżmy, że masz listę ul, zawierające pozycje, z których tylko jedna została kliknięta. Chciałbyś dodać styl dla rodzica tej pozycji za pomocą samego CSS. Będziesz mógł to zrobić tak:

$ul li.clicked {
background: red;
}

Innym ciekawym rozwiązaniem jest skrócenie składni wielokrotnych dopasowań. Pseudoselektor :matches() pozwala podać listę wszystkich obiektów:

:matches(section, article, aside) h1 {
font-size: 12px;
}

Interesująca jest też pseudoklasa :local-link(x). Powoduje ona użycie stylów tylko dla adresów znajdujących się w tej samej domenie. Co więcej, parametr x pozwala określić głębokość, dla jakiej dopasowanie ma mieć miejsce.

Więcej o CSS4 dowiedzieć się można się ze specyfikacji, tekstu Davida Storeya z grupy roboczej W3C, oraz opisu :any(), selektora który był bazą dla :matches().

źródło: webmonkey.com

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

16 skomentuj »

Komentarze

#1 tron 2011-10-27 14:46:27 1
A kiedy color zostanie zastąpione przez font-color, i wprowadzą vertical-align (left, center, right) i horizontal-align (top, center, bottom)?
IP: 62.87.168.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1
#2 Czesław 2011-10-27 14:48:45 0
Czy specyfikacja CSS Selectors Level 3 to jest specyfikacja CSS 3??
IP: 83.8.201.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.9.168 Version/11.51
#3 Marcin_MM 2011-10-27 14:48:45 -1
"kaskadowych arkuszy stylÓW" Pokaż komentarz
IP: 93.159.16.[...] Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1
#4 Łukasz Pasternak 2011-10-27 15:01:35 0
"Bardzo ciekawym rozwiązaniem jest wprowadzenie selektora rodzica"

O ile dobrze pamiętam to selektor rodzica mamy od CSS 1, jak już coś to odwrotnego rodzica. Znak dolara został w szkicu roboczym zamieniony na pytajnik, stąd powinno być to raczej:

?ul li.clicked { }

Ta zmiana pojawiła się już co najmniej miesiąc temu, developerska wersja szkicu roboczego znajduje się pod tym adresem:

http://dev.w3.org/csswg/selectors4/

ale w oficjalnym szkicu ta zmiana nie została uwzględniona, dlatego autorowi artykułu ujdzie tym razem na sucho :)

Zapraszam do lektury mojej ksiązki poświęconej w całości tematyce CSS 3, która ukaże się na początku przyszłego roku. Znajdziecie w niej to czego jeszcze nie ma w dotychczas wydanych publikacjach lub jest napisane o tym niewiele m.in.

transformacje 2D i 3D,

transitions,

animations,

media queries,

elastyczny model pudełkowy,

gradienty

i wiele innych ciekawych rzeczy, także dotyczących selektorów w CSS 4! :)
IP: 195.88.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.102 Safari/535.2
#5 Glibnes^® 2011-10-27 15:09:12 1
@tron

Z alignem powinno być odwrotnie: vertical z top, bottom itp. a horizontal z left i right.
IP: 188.40.142.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0a1) Gecko/20111026 Firefox/10.0a1
#6 Łukasz Pasternak 2011-10-27 15:15:20 0
@Czesław

CSS Selectors Level 3 jest częścią specyfikacji CSS 3. Kompletną listę modułów wraz ze stopniem ich rozwoju znajdziesz pod adresem:

http://www.w3.org/Style/CSS/current-work
IP: 195.88.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.102 Safari/535.2
#7 tron 2011-10-27 17:45:30 0
@Glibnes sorry, mój błąd ;)

@Łukasz Pasternak z niecierpliwością czekam na książkę. Będzie dostępna wersja elektroniczna, czy tylko papierowa?
IP: 83.25.20.[...] Mozilla/5.0 (X11; Linux x86_64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#8 Łukasz Pasternak 2011-10-27 19:00:19 0
@tron Rzadko kupuję ksiązki Helionu w formie e-booków, ale pewnie tak. Książki o CSS są w ścisłej topce bestsellerów, dlatego proszę się spodziewać mojej publikacji co najmniej kilka razy w "promocji dnia" gdzie będzie przeceniona o 30%. Może się okazać, że papierowa książka będzie po prostu tańsza niz e-book, którego w tej sytuacji nie będzie się opłacało kupować. Nie wiem jeszcze dokładnie ile będzie kosztować, ale chciałbym żeby cena była w miarę rozsądna. W końcu nie każdego stać by wydać 70zl czy 50zl na książkę o CSS. Nie będzie w niej nadmiarowego kodu, który odwraca uwagę od tego co naprawdę ważne, dla powiedzmy font-weight nie będzie całej strony kodu z , metainformacjami itp. Tylko to co naprawdę ważne. Książkę podzieliłem na kilka części: 1) wstęp, 2) Aktualny standard CSS 2.1 (żeby nie męczyć starych wyjadaczy np. wspomnianym font-weight), 3) CSS 3 i uwaga: 4)

komercyjny projekt witryny internetowej. Będzie to strona zakładu meblującego najlepsze krakowskie restauracje. Opiszę krok po kroku jak ją zbudować, od przyjęcia zamówienia po wysłanie na serwer. W ten sposób postaram się nauczyć praktycznego wykorzystania CSS, semantycznego kodu HTML oraz innych przydatnych webmasterskich umiejętności zwłaszcza początkujących. Ostatnią częścią będą dodatki, a planuję ich naprawdę sporo: ok. 20. Znajdą się wśród nich statystyki sieciowe, koło kolorów, bezpieczna paleta, wykaz właściwości CSS wraz z ich obsługą w czołowych przeglądarkach, core fonts i wiele innych!

Nie wykluczam, że kilka egzemplarzy można będzie wygrać w jakimś konkursie webhosting.pl :)
IP: 195.88.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.102 Safari/535.2
#9 Kamil Brenk 2011-10-28 00:55:37 0
@Łukasz Pasternak: ok, ale czym Twoja książka będzie się różnić na tle konkurencyjnych tytułów? Zwłaszcza w obliczu takich osobistości jak Eric Mayer? Nie wspominając o zagranicznym rynku książek:

- http://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863

- http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447

- http://www.amazon.com/CSS-Pocket-Reference-OReilly/dp/1449399037
IP: 109.243.253.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.9.168 Version/11.51
#10 gecior 2011-10-28 01:14:43 0
bo to będzie książka o css3 a nie css2.1 . W tej chwili ciężko o książkę o nowym cssiku
IP: 178.73.50.[...] Mozilla/5.0 (Windows NT 5.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#11 Kamil Brenk 2011-10-28 02:13:03 0
@gecior: to może inaczej zadam pytanie, specjalnie dla Ciebie - Łukaszu, ile stron z książki będzie poświęcone CSS3 (oraz dla porównania ile CSS2)? Bez praktycznego przykładu, bo tutaj głównie będzie użyty CSS2 z kilkoma linijkami CSS3, ewentualnym wspomnieniem vendor prefixes).
IP: 109.243.253.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.9.168 Version/11.51
#12 Łukasz Pasternak 2011-10-28 14:15:25 0
@Kamil Brenk

W książce Meyera oraz tej, która pojawi się w listopadzie nie ma zbyt wiele o CSS 3. Obie publikacje są poświęcone starym, dobrze znanym właściwościom CSS. Nie każdy lubi czytać e-booki po angielsku, a tak jak powiedziałem 50 lub 70zl za książkę o CSS to stanowczo za dużo. Chciałbym żeby czytelnik po lekturze mojej publikacji powiedział: "Naprawdę się opłacało! Sporo się z niej nauczyłem". Z tego względu moim priorytetem są nowości jakie pojawiły się w 3. odsłonie kaskadowych arkuszy styli, a są wśród nich m.in.

Selektory CSS 3, wstęp do selektorów CSS 4, formatowanie tekstu w CSS 3, Tekst w wielu kolumnach, gradienty, maski, refleksy w CSS, nowe właściwości tła, obramowania, obrysu i nowe sposoby definicji kolorów, transformacje 2D i 3D, transitions, animations, media queries i jeszcze kilka niespodzianek.

Początkowo chciałem by publikacja była poświęcona wyłącznie nowinkom ale Helion się nie zgodził, w związku z czym napisałem również część poświęconą CSS 2 by początkujący też znaleźli coś dla siebie. Jeżeli ktoś ma jeszcze jakieś pytania to chętnie na nie odpowiem. :)

http://helion.pl/ksiazki/css3-tworzenie-nowoczesnych-stron-www-lukasz-pasternak,css3tw.htm
IP: 195.88.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.102 Safari/535.2
#13 WebDev^® 2011-10-29 02:42:59 0
@Łukasz Pasternak

Czy w Twojej książce znajdą się jakieś porady na temat pisania stylów CSS z uwzględnieniem urządzeń dotykowych i o małych ekranach? Np. jak poradzić sobie bez :hover czy jak dodać do strony osobny arkusz ze stylami dla tabletów i smartphonów.
IP: 80.55.85.[...] Opera/9.80 (Windows NT 6.1; U; Edition Next; pl) Presto/2.9.220 Version/12.00
#14 Łukasz Pasternak 2011-10-29 10:43:11 0
@WebDev

Oczywiście to obejmuje zagadnienie media queries. Bardzo prawdopodobnym jest to, że w praktycznym projekcie witryny przygotujemy aż trzy osobne arkusze, dla smartfonów, tabletów oraz szerszych ekranów. :)
IP: 195.88.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#15 css3.pl 2011-10-30 12:34:16 0
W temacie książek do CSS3, czy taka książka będzie aktualna? Teraz to się wszystko dość szybko zmienia. Poza tym nauczanie CSS bez przykładów działającego kodu, który mogę skopiować, a najlepiej edytować na żywo, wydaje się mało atrakcyjne. Osobiście preferuję blogi i strony www, jest tego naprawdę sporo. Ale dla początkujących książka jest na pewno dobrym punktem zaczepienia.
IP: 85.221.180.[...] Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.106 Safari/535.2
#16 Łukasz Pasternak 2011-10-30 12:47:51 0
@css3.pl

Co do aktualności ksiązki to najnowsze nowiniki będę dopisywał na samym końcu by ją zachować. Kod zawsze można przepisać, zajmie to góra minutę, CSS to w końcu nie jest np. PHP, gdzie często mamy do czynienia z kilkunastoma lub kilkudziesięcioma linijkami kodu w książkowych listingach.
IP: 195.88.115.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.102 Safari/535.2

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.