Największą różnicą między CSS2 i CSS3 jest to, że CSS3 został podzielony na różne sekcje, zwane modułami. Każdy z tych modułów przechodzi przez W3C na różnych etapach procesu rekomendacji. Dzięki temu procesowi różne części CSS3 mogły zostać zaakceptowane i zaimplementowane w przeglądarce przez różnych producentów.
Jeśli porównasz ten proces do tego, co stało się z CSS2, gdzie wszystko zostało złożone jako pojedynczy dokument ze wszystkimi informacjami w Cascading Style Sheets wewnątrz niego, zaczynasz dostrzegać zalety rozbijania rekomendacji na mniejsze, pojedyncze kawałki. Ponieważ każdy z modułów jest opracowywany indywidualnie, mamy znacznie szerszy zakres obsługi przeglądarek dla modułów CSS3.
Podobnie jak w przypadku każdej nowej i zmieniającej się specyfikacji, należy dokładnie przetestować strony CSS3 w jak największej liczbie przeglądarek i systemów operacyjnych. Pamiętaj, że celem nie jest tworzenie stron internetowych, które wyglądają dokładnie tak samo w każdej przeglądarce, ale zapewnienie, że wszystkie style, których używasz, w tym style CSS3, świetnie wyglądają w przeglądarkach, które je obsługują, i które wracają wdzięcznie do starszych przeglądarek, które nie rób.
Nowe selektory CSS3
CSS3 oferuje kilka nowych sposobów pisania reguł CSS za pomocą nowych selektorów CSS, a także nowego kombinatora i kilku nowych pseudoelementów.
Trzy nowe selektory atrybutów:
- Dokładnie identyfikuj początku dopasowania
element foo ^ = "bar" Element ma atrybut o nazwie foo, który rozpoczyna się od "paska", np.
- Atrybut dokładnie kończy mecze
element foo $ = "bar" Element ma atrybut o nazwie foo, który kończy się na "pasek", np.
- Atrybut zawiera dopasowanie
element foo * = "bar" Element ma atrybut o nazwie foo, który zawiera ciąg "pasek", np.
16 nowych pseudoklas:
- :korzeń
- Główny element dokumentu. W HTML to zawsze.
- : n-dziecko (n)
- Użyj tego do dopasowania dokładnych elementów potomnych lub użyj zmiennych, aby uzyskać dopasowania naprzemienne.
- : nth-last-child (n)
- Dopasuj dokładne elementy podrzędne, licząc od ostatniego.
- : nth-of-type (n)
- Dopasuj elementy rodzeństwa o tej samej nazwie przed nim w drzewie dokumentu.
- : nth-last-of-type (n)
- Dopasuj elementy rodzeństwa o tej samej nazwie, licząc od dołu.
- :ostatnie dziecko
- Dopasuj ostatni element podrzędny elementu nadrzędnego.
- : pierwszy typ
- 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.
- : jedyny w swoim rodzaju
- Dopasuj element, który jest jedynym elementem tego typu.
- :pusty
- Dopasuj element, który nie ma dzieci (w tym węzły tekstowe).
- :cel
- Dopasuj element, który jest celem odsyłającego identyfikatora URI.
- : włączony
- Dopasuj element, gdy jest włączony.
- :wyłączone
- 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 selektora prostego s.
Jeden nowy kombinator:
- elementA ~ elementB
- Dopasuj, gdy element B podąża gdzieś po elemencie A, 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ło style wizualne, które prawdopodobnie kojarzą się bardziej z programem graficznym, takim jak Photoshop. Niektóre z nich, takie jak border-radius czy box-shadow, istnieją już od wprowadzenia, jeśli CSS3. Inne, takie jak Flexbox czy nawet CSS Grid, to nowsze style, które wciąż są często uważane za dodatki CSS3.
W CSS3 model pudełkowy się nie zmienił. Istnieje jednak szereg nowych właściwości stylu, które mogą pomóc w stylu tła i obramowania pudeł.
Wiele tła I magów
Korzystając ze stylów tła, tła i powtarzania tła, można określić wiele obrazów tła, które mają być ułożone jedna na drugiej w polu. Pierwszy obraz to warstwa najbliżej użytkownika, z następnymi pomalowanymi za. Jeśli występuje 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.
- tło-klip
- Ta właściwość definiuje sposób obcięcia obrazu tła. Domyślnie jest to ramka graniczna, ale można ją zmienić na pole dopełnienia lub pole zawartości.
- tło pochodzenia
- Ta właściwość określa, czy tło powinno znajdować się w polu wypełnienia, polu granicznym lub polu zawartości.
- rozmiar tła
- Ta właściwość pozwala wskazać rozmiar obrazu tła. Umożliwia rozciąganie mniejszych obrazów w celu dopasowania do strony.
Zmiany w istniejących właściwościach stylu tła
Istnieje również kilka zmian w istniejących właściwościach tła:
- powtarzanie tła
- Istnieją dwie nowe wartości dla tej właściwości: przestrzeń i runda. Miejsca spacja obraz płytki równomiernie w polu bez bycia obcięty. Okrągła przeskalowuje obraz tła tak, aby był układany całą liczbę razy w polu.
- tło-przywiązanie
- Dodano nową wartość "local", aby tło było przewijane z zawartością elementu, gdy element ten ma pasek przewijania.
- tło
- Skrócona własność tła dodaje właściwości rozmiaru i pochodzenia.
Właściwości krawędzi CSS3
W CSS3 granice mogą być stylami, do których jesteśmy przyzwyczajeni (solid, double, dashed itp.) Lub mogą być obrazem. Dodatkowo CSS3 umożliwia tworzenie zaokrąglonych narożników.Obrazy obramowania są interesujące, ponieważ tworzysz obraz wszystkich czterech granic, a następnie informujesz CSS, jak zastosować ten obraz do swoich granic.
Nowe właściwości stylu ramki
W CSS3 są nowe właściwości obramowania:
- border-radius
- border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
- Te właściwości pozwalają tworzyć zaokrąglone narożniki na granicach.
- border-image-source
- Określa plik źródłowy obrazu, który ma zostać użyty zamiast już zdefiniowanych stylów obramowania.
- obramowanie obrazu
- Reprezentuje odsunięcia do środka od krawędzi obrazu krawędzi
- szerokość obramowania
- Definiuje wartość szerokości obrazu obramowania.
- Obraz wyjściowy granicy
- Określa wielkość obszaru obramowania wykraczającego poza pole obramowania.
- border-image-stretch
- Określa sposób układania lub skalowania boków i środkowych części obrazu obramowania.
- obraz graniczny
- Skrócona właściwość dla wszystkich właściwości obrazu granicy.
Dodatkowe właściwości CSS3 związane z ramkami i tłem
Kiedy pudełko jest zepsute w podziale na strony, podział kolumny na podział wiersza (w przypadku elementów śródliniowych) właściwość box-decoration-break określa, w jaki sposób nowe pola są zawijane ramką i obramowaniem. Tła można podzielić między wiele uszkodzonych skrzynek za pomocą tej właściwości.
Istnieje również właściwość box-shadow, która może być używana do dodawania cieni do elementów pudełkowych.
Dzięki CSS3 możesz teraz łatwo skonfigurować stronę sieci Web z wieloma kolumnami bez tabel i skomplikowanych struktur znaczników div. Po prostu powiedz przeglądarce, ile kolumn ma zawierać element bryłowy i jak powinny one być. Dodatkowo możesz dodawać ramki (reguły), kolory tła, które rozciągają się na wysokość kolumny, a tekst będzie automatycznie przepływał przez wszystkie kolumny.
Kolumny CSS3 - Określ liczbę i szerokość kolumn
Istnieją trzy nowe właściwości, które umożliwiają określenie liczby i szerokości kolumn:
- szerokość kolumny
- Określa szerokość, jaką powinny mieć kolumny. Przeglądarka przepłynie tekst, aby wypełnić spację szerokimi kolumnami.
- liczba kolumn
- Określa liczbę kolumn na stronie. Przeglądarka utworzy kolumny wystarczająco szerokie, aby zmieściły się w przestrzeni, ale tylko podaną przez ciebie liczbę.
- kolumny
- Skrócona właściwość, w której można zdefiniować szerokość lub liczbę (lub oba, ale to rzadko ma sens).
Luki i reguły kolumn CSS3
Luki i reguły są umieszczane między kolumnami w tym samym scenariuszu wielobarwnym. Luki rozdzielają kolumny, ale reguły nie zajmują żadnej przestrzeni. Jeśli reguła kolumny jest szersza niż odstęp, będzie nakładać się na sąsiednie kolumny. istnieje pięć nowych właściwości dla reguł kolumn i przerw:
- luka między kolumnami
- Określa szerokość odstępów między kolumnami.
- kolumna-reguła-kolor
- Określa kolor reguły.
- styl reguły kolumny
- Określa styl reguły (pełny, przerywany, podwójny itp.).
- szerokość-kolumny
- Określa szerokość reguły.
- kolumna-reguła
- Skrócona właściwość definiująca wszystkie właściwości trzech kolumn jednocześnie.
Podziały kolumn CSS3, Kolumny rozpinające się i Kolumny wypełnień
Podziały kolumn korzystają z tych samych opcji CSS2, które są używane do definiowania przerw w zawartości stronicowanej, ale z trzema nowymi właściwościami: break-before, break-after, i włamanie do środka.
Podobnie jak w przypadku tabel, możesz ustawić elementy, które mają obejmować kolumny z właściwością kolumna-zakres. Umożliwia to tworzenie nagłówków, które obejmują wiele kolumn bardziej przypominających gazetę.
Kolumny wypełniania decydują o tym, ile treści będzie w każdej kolumnie. Zrównoważone kolumny starają się umieścić taką samą ilość treści w każdej kolumnie, podczas gdy auto po prostu przesyła zawartość, dopóki kolumna nie jest pełna, a następnie przechodzi do następnej.
Więcej funkcji w CSS3, które nie są zawarte w CSS2
Istnieje wiele dodatkowych funkcji w CSS3, które nie istniały w CSS2, w tym:
- Moduł CSS Template layout i moduł pozycjonowania siatki CSS3: Tworzenie siatki za pomocą CSS.
- Moduł tekstowy CSS3: Zarys tekstu, a nawet tworzyć cienie z CSS.
- Moduł kolorów CSS3: Teraz z nieprzezroczystością.
- Zmiany w modelu pudełkowym: W tym własność markizy, która zachowuje się jak tag IE.
- Moduł interfejsu użytkownika CSS3: Daje ci nowe kursory, odpowiedzi na akcje, wymagane pola, a nawet zmianę rozmiaru elementów.
- Zapytania o media: Zapytania o media 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ą większy obszar wyświetlania niż 20em.
- Moduł CSS3 Ruby: Zapewnia obsługę języków używających tekstu ruby do adnotowania dokumentów.
- Moduł CSS3 Paged Media: Jeszcze większe wsparcie dla stronicowanych nośników (papier, folie itp.).
- Wygenerowana treść: L z nagłówkami i stopkami, przypisami dolnymi i innymi treściami generowanymi programowo, szczególnie dla nośników stronicowanych.
- Moduł mowy CSS3: Zmiany w fonetycznym CSS.
