Na początku poprzedniego materiału napisałem, że: Za pomocą CSS-a, szczególnie korzystając z modułów poziomu trzeciego, można czynić cuda.

[TUTORIAL] Stworzyłem tego lwa w CSS używając 28 kół

Zapewne może Was dziwić słowo moduły użyte w tym kontekście. Przecież CSS3 to CSS3: nowe selektory, box model, animacje, transformacje, flexbox itd. Jakie znowu moduły? Śpieszę z wyjaśnieniem.

W przypadku CSS1 i CSS2, ze względu na sposób wydawania specyfikacji, możemy mówić o pewnej całości. Możemy przez CSS2 odwoływać się do ogółu atrybutów i właściwości, które zostały dodane w stosunku do poprzedniej wersji. I o ile takie odwołania w tym przypadku są zrozumiałe, o tyle począwszy od „CSS3” nie są do końca poprawne.

„CSS3” bowiem, ze względu na rosnącą liczbę właściwości styli kaskadowych, zaczął być wydawany modułowo. Specyfikacja CSS2 służy za bazę, na której fundamentach każdy moduł rozwija i poszerza dotychczasowe możliwości.

CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification.

I tak oto mamy teraz:

  • selektory poziomu 3-ciego
  • wartości i jednostki poziomu 3-ciego
  • layout wielo-kolumnowy poziomu 1-szego
  • transformacje poziomu 1-szego
  • …

…więcej tutaj

Modułowa budowa styli pasuje jak ulał do wprowadzania nowych atrybutów w przeglądarkach, gdzie w każdej kolejnej wersji dochodzi tylko parę nowych atrybutów. No ale nie przedłużając, podejrzyjmy jak wyglądają prace nad modułami poziomu 4-tego i innymi :)

Selektory poziomu 4-tego zapowiadają kilka ciekawych nowości, między innymi:

Pattern Represents
E:matches(s1, s2) an E element that matches compound selector s1 and/or compound selector s2
E:not(s1, s2) – teraz można podać wiele selektorów w nawiasach an E element that does not match either compound selector s1 or compound selector s2
E[foo=”bar” i] an E element whose foo attribute value is exactly equal

to any (ASCII-range) case-permutation of bar
E:indeterminate a user interface element E that is in an indeterminate state (neither checked nor unchecked)
E:nth-match(n of selector) an E element, the n-th sibling matching selector
E:nth-last-match(n of selector) an E element, the n-th sibling matching selector, counting from the last one
E:column(selector) an E element that represents a cell in a grid/table belonging to a column represented by an element that matches selector
E /foo/ F an F element ID-referenced by an E element’s foo attribute
E! > F an E element parent of an F element

A także wiele innych…

Media Queries poziomu 4 zmieniają się w następujący sposób:

  • dodano właściwości scripting, pointer, hover, update, overflow-block i overflow-inline
  • odstęp pomiędzy słowami “and”, “not” i “only” jest wymagany
  • wszystkie media types są przestrzałe oprócz screen, print, speech i all
  • device-width, device-height, device-aspect-ratio są przestarzałe

…więcej tutaj.

Polecam lekturę dokładnych informacji o nowych specyfikacjach pod tym linkiem: https://www.w3.org/Style/CSS/specs.en.html

Dowiemy się z niej między innymi o nowej notacji image() zamiast url() do definiowania obrazków, możliwym fallbacku obrazków; line gridzie do wyrównania linii i bloków na niewidocznej siatce oraz zmianach w pozostałych modułach. Naprawdę jest tego sporo.

O autorze

Filip Konieczny – student drugiego roku Informatyki na Politechnice Warszawskiej. Fanatyk programowania, w szczególności JS’a. Na tym polu jego podstawowa technika bojowa składa się z uczenia nowych rzeczy i robienia wszystkiego samemu.

TEMATY:
Najświeższe artykuły