Różnica między CSS2 a CSS3

Największa różnica między CSS2 a CSS3 jest to, że CSS3 został podzielony na różne sekcje, zwane moduły. Każdy z tych modułów przechodzi przez W3C na różnych etapach procesu rekomendacji. Proces ten znacznie ułatwił akceptację i implementację różnych fragmentów CSS3 w przeglądarce przez różnych producentów.

Jeśli porównasz ten proces z tym, co wydarzyło się w CSS2, wszystko zostało przesłane jako jeden dokument ze wszystkimi Kaskadowe arkusze stylów informacji w nim zawartych, zaczynasz dostrzegać zalety dzielenia rekomendacji na mniejsze, pojedyncze części. Ponieważ każdy z modułów jest opracowywany indywidualnie, programiści mogą cieszyć się znacznie szerszym zakresem obsługi modułów CSS3 przez przeglądarki.

Nowe selektory CSS3

CSS3 oferuje kilka nowych sposobów pisania reguł CSS za pomocą nowych selektorów CSS, a także nowy kombinator i kilka nowych pseudoelementów.

Istnieją trzy nowe selektory atrybutów:

• Początek atrybutu pasuje dokładnie:

  element[foo^="bar"]

  Element posiada atrybut o nazwie foo, który zaczyna się od „bar”, np.
instagram viewer
• Atrybut kończący się dokładnie pasuje:

  element[foo$="bar"]

  Element posiada atrybut o nazwie foo, który kończy się na „bar”, np.
• Atrybut zawiera dopasowanie:

  element[foo*="bar"]

  Element ma atrybut nazywa bla zawierający ciąg „bar”.

Wprowadzono 16 nowych pseudoklas:

• :korzeń
  • Główny element dokumentu.
• :n-te dziecko (n)
  • Użyj tego, aby dokładnie dopasować elementy podrzędne lub użyj zmiennych, aby uzyskać dopasowania naprzemienne.
• :n-te-ostatnie-dziecko (n)
  • Dopasuj dokładnie elementy podrzędne, licząc od ostatniego.
• :n-ty-typ (n)
  • Dopasuj elementy rodzeństwa o tej samej nazwie przed nim w drzewie dokumentu.
• :n-ty-ostatni typu (n)
  • Dopasuj elementy rodzeństwa o tej samej nazwie, licząc od dołu.
• :ostatnie dziecko
  • Dopasuj ostatni element potomny rodzica.
• :pierwszy w swoim rodzaju
  • Dopasuj pierwszy element rodzeństwa tego typu.
• :ostatni typ
  • Dopasuj ostatni element rodzeństwa tego typu.
• :Jedynak
  • Dopasuj element, który jest jedynym dzieckiem jego rodzica.
• :tylko w typie
  • Dopasuj element, który jest jedynym tego typu.
• :pusty
  • Dopasuj element, który nie ma dzieci (w tym węzłów tekstowych).
• :cel
  • Dopasuj element, który jest celem odsyłającego URI.
• :włączone
  • Dopasuj element, gdy jest włączony.
• :niepełnosprawny
  • Dopasuj element, gdy jest wyłączony.
• :sprawdzone
  • Dopasuj element, gdy jest zaznaczony (przycisk radiowy lub pole wyboru).
• :nie (s)
  • Dopasuj, gdy element nie pasuje do prostego selektory.

Jest jeden nowy kombinator:

• elementA ~ elementB
  • Dopasuj, gdy elementB następuje gdzieś po elemencieA, niekoniecznie natychmiast.

Nowe właściwości

CSS3 wprowadził również kilka nowych właściwości CSS. Wiele z tych właściwości tworzy style wizualne, które prawdopodobnie bardziej kojarzą się z programem graficznym, takim jak Photoshop. Niektóre z nich, jak border-radius czy box-shadow, istnieją od czasu wprowadzenia CSS3. Inne, takie jak flexbox, a nawet CSS Grid to nowsze style, które wciąż są często uważane za dodatki CSS3.

W CSS3 model pudełkowy nie uległ zmianie. Istnieje jednak wiele nowych właściwości stylu, które mogą pomóc w stylizacji tła i obramowania pudełek.

Wiele obrazów tła

Używając stylów background-image, background-position i background-repeat, możesz określić wiele obrazów tła, które mają być ułożone jeden na drugim w polu. Pierwszy obraz to warstwa najbliższa użytkownikowi, a kolejne są namalowane za nim. Jeśli istnieje kolor tła, jest on malowany pod wszystkimi warstwami obrazu.

Nowe właściwości stylu tła

Istnieje również kilka nowych właściwości tła w CSS3:

• klip w tle
• Ta właściwość definiuje sposób przycinania obrazu tła. Domyślnie jest to pole obramowania, ale można je zmienić na pole dopełnienia lub pole zawartości.
• tło-pochodzenie
• Ta właściwość określa, czy tło powinno być umieszczone w polu dopełnienia, polu obramowania czy polu treści.
• rozmiar tła
• Ta właściwość wskazuje, że rozmiar obrazu tła. Pozwala to rozciągnij mniejsze obrazy, aby dopasować je do strony.

Zmiany w istniejących właściwościach stylu tła

Wprowadzono również kilka zmian w istniejących właściwościach stylu tła:

• powtarzanie tła
  • Istnieją dwie nowe wartości tej właściwości — przestrzeń i okrągły. Spacja równomiernie rozmieszcza sąsiadujący obraz w polu bez przycinania. Round przeskalowuje obraz tła, tak że będzie on układał się w polu całą liczbę razy.
• załącznik w tle
  • Dodawana jest nowa wartość „local”, aby tło przewijało się wraz z zawartością elementu, gdy ten element ma pasek przewijania.
• tło
  • Skrócona właściwość background dodaje właściwości size i origin.

Właściwości obramowania CSS3

W CSS3 obramowania mogą być stylami, do których jesteśmy przyzwyczajeni (jednolity, podwójny, przerywany itp.) lub mogą być obrazem. Dodatkowo CSS3 obsługuje zaokrąglone rogi. Obrazy obramowania są interesujące, ponieważ tworzysz obraz wszystkich czterech obramowań, a następnie mówisz CSS, jak zastosować ten obraz do obramowań.

Nowe właściwości stylu obramowania

W CSS3 jest kilka nowych właściwości obramowania:

• promień-granicy
• obramowanie-prawy-górny-promień, obramowanie-dolny-prawy-promień, obramowanie-dolny-lewy-promień, obramowanie-górny-lewy-promień
• Te właściwości umożliwiają tworzenie zaokrąglonych rogów na granicach.
• źródło-obrazu-obramowania
• Określa plik źródłowy obrazu, który ma być używany zamiast już zdefiniowanych stylów obramowania.
• obramowanie-obrazu-plasterka
• Reprezentuje wewnętrzne przesunięcia od krawędzi obrazu obramowania.
• szerokość-obrazu-obramowania
• Definiuje wartość szerokości obrazu obramowania.
• granica-obraz-początek
• Określa wielkość, o jaką obszar obramowania obrazu wykracza poza obramowanie.
• obramowanie-obrazu-rozciąganie
• Określa, w jaki sposób boki i środkowe części obrazu obramowania powinny być kafelkowane lub skalowane.
• obramowanie obrazu
• Skrócona właściwość wszystkich właściwości border-image.

Dodatkowe właściwości CSS3 związane z obramowaniem i tłem

Gdy ramka jest łamana w miejscu podziału strony, kolumny lub wiersza (w przypadku elementów śródliniowych), Przerwa na dekorację pudełek właściwość określa, w jaki sposób nowe pudełka są owijane obramowaniem i dopełnieniem. Tła dzielą się na kilka rozbitych pudełek za pomocą tej właściwości.

Nowy cień pudełka Właściwość dodaje cienie do elementów pudełka.

Dzięki CSS3 możesz teraz łatwo skonfigurować stronę internetową z kilkoma kolumnami bez tabel lub skomplikowanych div struktury znaczników. Po prostu mówisz przeglądarce, ile kolumn powinien mieć element body i jak szerokie powinny być. Dodatkowo możesz dodać obramowania (reguły) i kolory tła, które obejmują wysokość kolumny, a tekst automatycznie przejdzie przez wszystkie kolumny.

Określ liczbę i szerokość kolumn

Są trzy nowe nieruchomości które pozwalają określić liczbę i szerokość Twoich kolumn:

• szerokość kolumny
  • Definiuje szerokość Twoich kolumn. Przeglądarka prześle następnie tekst, aby wypełnić przestrzeń tak szerokimi kolumnami.
• liczba kolumn column
  • Definiuje liczbę kolumn na stronie. Przeglądarka utworzy wtedy kolumny wystarczająco szerokie, aby zmieściły się w przestrzeni, ale tylko podaną przez Ciebie liczbę.
• kolumny
  • Właściwość skrócona, w której można zdefiniować szerokość lub liczbę (lub obie, ale rzadko ma to sens).

Odstępy i reguły w kolumnach CSS3

Luki i reguły są umieszczane między kolumnami w tym samym scenariuszu wielokolumnowym. Luki rozsuną kolumny, ale reguły nie zajmują miejsca. Jeśli reguła kolumny jest szersza niż odstęp, nałoży się na sąsiednie kolumny. Dostępnych jest pięć nowych właściwości reguł kolumn i przerw:

• kolumna-przerwa
  • Definiuje szerokość przerw między kolumnami.
• kolumna-reguła-kolor
  • Definiuje kolor reguły.
• styl-reguła-kolumny
  • Definiuje styl reguły (pełny, kropkowany, podwójny itp.).
• kolumna-reguła-szerokość
  • Definiuje szerokość reguły.
• kolumna-reguła
  • Skrócona właściwość definiująca wszystkie trzy właściwości reguł kolumn jednocześnie.

Podziały kolumn CSS3, kolumny łączące i kolumny wypełniające

Kolumna przerwy używają tych samych opcji CSS2, które są używane do definiowania przerw w treści stronicowanej, ale z trzema nowymi właściwościami: przerwa przed, przerwa po, i włamać się do środka.

Podobnie jak w przypadku tabel, możesz ustawić elementy, aby obejmowały kolumny za pomocą właściwości column-span. Pozwala to tworzyć nagłówki, które obejmują wiele kolumn, bardziej jak gazeta.

Wypełnianie kolumn decyduje o ilości treści w każdej kolumnie. Zrównoważone kolumny próbują umieścić tę samą ilość treści w każdej kolumnie, podczas gdy auto po prostu wlewa zawartość, aż kolumna się zapełni, a następnie przechodzi do następnej.

Więcej funkcji w CSS3, których nie ma w CSS2

Istnieje wiele dodatkowych funkcji w CSS3, które nie istniały w CSS2, w tym:

• Moduł układu szablonu CSS i moduł pozycjonowania siatki CSS3: Tworzenie siatek za pomocą CSS.
• Moduł tekstowy CSS3: Zarysuj tekst, a nawet twórz cienie za pomocą CSS.
• Moduł kolorów CSS3: Teraz z nieprzezroczystością.
• Zmiany w modelu pudełkowym: w tym duży namiot właściwość, która działa jak tag IE.
• Moduł interfejsu użytkownika CSS3: Dajemy nowe kursory, odpowiedzi na działania, wymagane pola, a nawet zmianę rozmiaru elementów.
• Zapytania dotyczące mediów: Zapytania dotyczące mediów pozwalają na większą elastyczność podczas definiowania sposobu użycia arkusza stylów. Na przykład, możesz zdefiniować arkusz stylów, który jest przeznaczony tylko dla urządzeń przenośnych, które mają rzutnię większą niż 20 em.
• Moduł CSS3 Ruby: Zapewnia obsługę języków używających tekstowego ruby ​​do opisywania dokumentów.
• Moduł CSS3 Paged Media: Jeszcze większa obsługa nośników stronicowanych (papier, folie, itp.).
• Wygenerowana treść: uruchamianie nagłówków i stopek, przypisów i innych treści generowanych programistycznie, zwłaszcza w przypadku multimediów stronicowanych.
• Moduł mowy CSS3: Zmiany w dźwiękowym CSS.