CSS3 vs CSS - Kaskadowe arkusze stylów lub CSS to kluczowy element projektowania stron internetowych. Jako programista lub projektant stron internetowych musisz dobrze rozumieć CSS, zwłaszcza różnicę między CSS3 a CSS.

Być może słyszałeś lub spotkałeś się z pojęciem CSS3, jeśli czytałeś o tworzeniu stron internetowych lub projektowaniu stron internetowych. Jeśli kiedykolwiek zastanawiałeś się, czym może być różnica między CSS3 a CSS, oto wszystkie twoje wątpliwości zostaną rozwiane: oba są takie same.

Zgadza się: CSS3 vs CSS są tak różne od siebie jak HTML i HTML5. CSS3 to po prostu najnowsza wersja CSS. Ludzie, którzy teraz mówią o kodowaniu CSS, tak naprawdę odnoszą się tylko do CSS3.

Zarówno HTML5, jak i CSS3 na ogół stały się modnymi słowami, których znaczenie wykracza poza ich rzeczywiste technologie. Symbolizują one przestrzeganie pewnych podstawowych standardów w tworzeniu stron internetowych zamiast korzystania z zastrzeżonego oprogramowania. W większości szum wokół tych modnych słów już ucichł. Większość firm, nawet tych, które przysięgają, że przechowują wszystko w domu, zgodzi się, że przestrzeganie tych podstawowych standardów znacznie ułatwia życie wszystkim.

Minęło sporo czasu, odkąd CSS3 został uruchomiony i zaakceptowany przez wszystkich. Przyniosło to wiele wspaniałych rzeczy dla branży i stanowiło znaczny krok naprzód w zakresie tworzenia stron internetowych w ogóle. Poprzednia wersja, CSS2, została uruchomiona już w 1998 roku. To prawie 20 lat temu. Jedyną poprawką, którą otrzymał po uruchomieniu, była w 2011 r., O nazwie CSS2.1. Mimo rewizji większość ekspertów zaczęła już mówić, że CSS3 jest nieunikniony. CSS3 zawiera wiele funkcji i możliwości, które do tego czasu stały się całkowicie konieczne.

To, czego możesz nie wiedzieć o CSS3, to fakt, że zaczął on rozwijać dopiero rok po przesłaniu poprzedniej wersji. Oznacza to, że W3C pracował nad ulepszoną wersją od 1999 roku. Wydanie pierwszej stabilnej wersji CSS3 zajęło ponad 12 lat.

Istnieją ogromne różnice między CSS3 a CSS (do których wkrótce dojdziemy). Ale faktem jest, że przeglądarki internetowe były już gotowe na dodatki do CSS3 do czasu jego wydania. W rezultacie dość szybko dostosowali się do nowej wersji. Każda większa przeglądarka internetowa obsługuje teraz CSS3, nawet Internet Explorer!

Oczywiście W3C nadal rozwija CSS3 i HTML5, więc ostateczna wersja jest mało prawdopodobna. Szczerze mówiąc, ostateczna wersja nie jest w tej chwili koniecznością, biorąc pod uwagę, jak szybko rozwija się Internet. W związku z wymaganiami internetowymi i samą branżą, która rozwija się i zmienia tak szybko, kodowanie musi iść do przodu tak szybko, jeśli nie dłużej.

CSS3 vs infografiki CSS

Zdefiniowane różnice CSS3 a CSS

Teraz, gdy wiesz trochę o tle CSS3, przyjrzyjmy się, co się zmieniło. Być może największą różnicą między CSS3 a poprzednią wersją, którą zastąpił, jest separacja modułów. W CSS2 wszystko było pojedynczą dużą specyfikacją, która definiowała różne funkcje. Jednak CSS3 zmienił to, wprowadzając kilka dokumentów zwanych modułami. Każdy moduł ma swoje nowe możliwości, które nie wpływają na kompatybilność poprzedniej stabilnej wersji CSS.

Zapytania o media

Dostępnych jest wiele modułów, ale tylko cztery są publikowane jako formalne zalecenia W3C. Te cztery duże moduły to:

  1. Kolor, opublikowany w 2011 r
  2. Selektory poziomu 3, opublikowane w 2011 r
  3. Przestrzenie nazw, opublikowano 201
  4. Zapytania medialne, opublikowane w 2012 r

Wśród nich najważniejszym modułem są zapytania mediów. W rzeczywistości ten moduł może być prawdopodobnie najważniejszym dodatkiem, który CSS3 w ogóle wprowadził do CSS. Zapytania o media są dość proste: umożliwiają zastosowanie określonych warunków do różnych arkuszy stylów. Dzięki temu strony internetowe mogą być płynne lub „reagować” na różne rozmiary ekranu. Innymi słowy, strony internetowe mogą dostosowywać swoje wymiary i elementy do różnych urządzeń. Obecnie responsywne projektowanie stron internetowych jest prawdopodobnie największym modnym hasłem. Biorąc pod uwagę, że większość Internetu jest obecnie wykorzystywana na urządzeniach mobilnych, responsywne projektowanie jest absolutnie niezbędne, a zapytania medialne pomagają to osiągnąć. Moduł umożliwia także programistom dostosowanie stron internetowych do różnych rozdzielczości bez zmiany lub usuwania treści.

Zapytania o media są również dość łatwe do rozgryzienia i dodania. Gdy użyjesz ich kilka razy, możesz właściwie dowiedzieć się reszty. Oto kilka przykładowych wierszy kodu:

@media screen i (maksymalna szerokość: 600 pikseli) (

tło: #FFF;

)

Wydaje się to dość proste, prawda? Za pomocą tych kilku wierszy kodu możesz włączyć stylizację ekranów o maksymalnej szerokości 600 pikseli. Oznacza to, że wszystkie ekrany o maksymalnej szerokości 600 pikseli pokażą białe tło. Maksymalna szerokość jest tylko jednym z kilku warunków, które można zastosować do arkusza stylów w CSS3. Kolejnym jest maksymalna szerokość urządzenia. Jest to rozdzielczość ekranu, a nie obszar wyświetlania. Ponadto można podać wartość minimalną zamiast maksymalnej; wystarczy użyć „min” zamiast „max”. Możesz również połączyć te dwa, jak poniżej:

@media screen i (min-width: 600px) i (max-width: 900px) (

tło: #FFF;

)

Tutaj styl dotyczy tylko ekranów o szerokości wyświetlania 600-900 pikseli. CSS3 zawiera niektóre wstępnie zdefiniowane arkusze stylów dla popularnych urządzeń mobilnych, takich jak Apple iPad i iPhone. Tutaj jest kilka z nich:

Do tej pory powinno być całkiem jasne, jak ważne są zapytania mediów. Ten moduł jest bardzo przydatny dla programistów, którzy chcą tworzyć responsywne projektowanie stron internetowych przy możliwie najmniejszym stopniu kodowania.

Zaokrąglone granice

CSS3 zawiera również kilka naprawdę kluczowych zagadnień związanych z projektowaniem stron internetowych. Na przykład granice można zaokrąglać bez włamań, a CSS3 wprowadza zaokrąglone granice. Był to ogromny plus dla programistów i projektantów stron internetowych, którzy wcześniej borykali się z granicami CSS. Nic dziwnego, że niektóre z tych funkcji nadal nie działają w starych wersjach Internet Explorera. Jedyny dodatkowy kod, który należy dodać do określonej klasy w arkuszu stylów, to na przykład:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

obramowanie: stały 2px # 897048;

W ten sposób CSS3 znacznie ułatwia życie twórcy i projektantowi stron internetowych. Wydanie zawierało również gradienty, które były zaskakująco niedostępne w poprzednich wersjach.

Polecane kursy

  • Szkolenie online na temat usług sieciowych w Javie
  • Profesjonalne tworzenie gier w szkoleniu w C ++
  • Program etycznego hakowania
  • Pakiet szkoleniowy Vegas Pro 13

Obrazy na obrzeżach, cienie tekstu

Inne elementy, które zostały dodane za pomocą CSS3, ale których brakowały w poprzednich wersjach, to między innymi obrazy obramowania i cienie ramek / tekstu. CSS3 uprościł sprawę, eliminując potrzebę dodawania hacków do któregokolwiek z powyższych popularnych elementów stylizacji. Na przykład oto samotny wiersz kodu, który należy dodać do cieni tekstu:

text-shadow: 2px 2px 2px # ddccb5;

Kolumny

CSS3 uprościł także sposób dodawania kolumn do treści. Wystarczy teraz dodać cztery wiersze kodu:

  1. liczba kolumn
  2. szerokość kolumny
  3. odstęp między kolumnami
  4. reguła kolumny

Wiele środowisk

Najnowsza wersja CSS dodała także możliwość bezpośredniego wykorzystywania wielu środowisk z CSS, zamiast używania hacków ronda jak wcześniej. Kod jest niezwykle prosty do zapamiętania i napisania, a także jest bardzo ważny do tworzenia nowoczesnych elementów do projektowania stron internetowych. Oto przykład:

.multiplebackgrounds (

wysokość: 100 pikseli;

szerokość: 200px;

wypełnienie: 20px;

background: url (top.gif) w prawym górnym rogu bez powtarzania,

url (bottom.gif) górny lewy powtórz-y,

url (middle.gif) dolne powtórzenie-z;

)

Prefiksy dostawcy

Prefiksy dostawców były często używane w czasie, gdy właśnie wydano CSS3. Pomogli przeglądarkom interpretować kod CSS. Są używane do dziś, na wypadek, gdyby Twoja przeglądarka internetowa nie mogła odczytać kodu. Oto prefiksy dostawcy dla głównych przeglądarek:

  • -moz- : Firefox
  • -webkit- : przeglądarki Webkit, takie jak Apple Safari i Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Prefiks Opery stał się również zbędny, odkąd firma przeniosła przeglądarkę mobilną i stacjonarną na platformę Webkit z silnika renderującego Presto. Mimo że do pewnego stopnia nadal używany jest prefiks dostawcy, w tym momencie w większości zniknął.

Dodano pseudoklasy

Dzięki dodatkowi CSS3 otrzymaliśmy również wiele dodatkowych pseudoklas, w tym strukturalne do kierowania elementów na podstawie ich pozycji dokumentu i relacji do innych różnych elementów. Tutaj jest kilka z nich:

  • : root wskazuje na element główny dokumentu
  • : not (s) targetuje elementy niepasujące do selektorów określonych w (s)
  • : first-child celuje w pierwsze child w kontenerze niezależnie od rodzaju przedmiotu
  • : first-of-type kieruje na pierwszy określony typ elementu w obrębie elementu nadrzędnego
  • : nth-child (n) używa wartości liczbowych w obrębie (n) do kierowania elementów potomnych w odniesieniu do ich pozycji w rodzicu. Możesz na przykład użyć tego, aby dodać naprzemienne kolory tła do komentarzy na blogu
  • : puste elementy docelowe, które nie zawierają tekstu ani dzieci, takie jak puste elementy, takie jak
  • : only-child celuje w elementy w drzewie dokumentów, które jest jedynym elementem potomnym w obiekcie nadrzędnym

Nowe selektory CSS3

CSS3 oferuje wiele sposobów na napisanie reguł CSS poprzez nowe selektory, nowy kombinator i pseudoelementy: oto trzy nowe selektory atrybutów:

  • W celu dokładnego dopasowania element (foo = ”bar”)
  • Aby dopasować element z atrybutem o nazwie foo zaczynającym się od „bar”, element (foo $ = ”bar”)
  • Aby dopasować element z atrybutem o nazwie foo kończącym się na „bar”, element (foo * = ”bar”)

CSS3 zawiera kilka nowych pseudoklas, z których niektóre zostały omówione powyżej. Oto kilka innych:

  • : n-last-child (n) dopasowuje dokładnie elementy potomne z ostatniego
  • : nth-of-type (n) dopasowuje elementy rodzeństwa o tej samej nazwie przed nimi w drzewie dokumentów
  • : nth-last-of-type (n) dopasowuje elementy rodzeństwa o tej samej nazwie od dołu
  • : last-of-type kieruje na ostatni określony typ elementu w rodzicu
  • : targetuje tylko z typu, którego element jest jedynym typem
  • : docelowe elementy docelowe, na które skierowany jest URI odsyłający
  • : enabled dopasowuje element, gdy jest włączony
  • : disabled dopasowuje element, gdy jest wyłączony
  • : zaznaczone celuje w element, gdy jest on sprawdzany przez pole wyboru lub przycisk opcji

Nowy kombinator

CSS3 jest również wyposażony w zupełnie nowy kombinator: elementA ~ elementB

Ten nowy kombinator pasuje, gdy element A następuje gdzieś później przez element B, ale nie natychmiast po nim.

Nowe właściwości stylu pudełka

CSS3 ma ten sam model pudełka co poprzednia wersja, ale ma pewne nowe właściwości stylu, które pomagają stylizować ramki i tła twoich pudeł. Nowe właściwości tła w CSS3 to:

  • klip w tle

Ta właściwość służy do definiowania sposobu przycinania obrazu tła. Domyślne wymiary przycinania to pole obramowania, ale można je zmienić na pole zawartości lub pole wypełnienia.

  • pochodzenie pochodzenia

Ta konkretna właściwość służy do określania, czy tło powinno zostać umieszczone w ramce obramowania, polu zawartości czy polu wypełnienia.

  • rozmiar tła

Ta właściwość umożliwia deweloperowi wskazanie rozmiaru obrazu tła i rozciągnięcie mniejszych obrazów w celu dopasowania strony.

CSS3 zmienił także niektóre z istniejących właściwości stylu tła. Oto spojrzenie na zmiany:

  • powtarzanie tła

Ta właściwość ma teraz dwie nowe wartości: okrągły i spację. Round przeskalowuje obraz, aby umieścić go kilka razy w polu. Spacja równomiernie rozmieszcza kafelki w ramce bez przycinania.

  • załącznik tła

Właściwość nr zawiera wartość „lokalną”, dzięki czemu tło przewija się wraz z zawartością elementu w przypadku, gdy element ma pasek przewijania.

Nowe właściwości granicy

CSS3 umożliwia stylizację granic jako podwójnych, jednolitych, przerywanych lub nawet jako obraz. Obrazy obramowań są interesującym dodatkiem: pozwalają stworzyć obraz wszystkich czterech ramek, a następnie nakazać CSS zastosowanie obrazu do granic. Oto kilka nowych właściwości granic, które są dostarczane z CSS3:

  • promień obramowania, obramowanie dolnego prawego promienia, obramowanie górnego prawego promienia, obramowanie górnego lewego promienia, obramowanie dolnego lewego promienia pozwala tworzyć zaokrąglone obramowania
  • border-image-source pozwala określić plik źródłowy obrazu zamiast korzystać ze wstępnie zdefiniowanych stylów ramki
  • plasterek obrazu obramowania reprezentuje wewnętrzne przesunięcia od krawędzi obrazów obramowania
  • border-image-width określa wartość szerokości obrazu granicy
  • border-image-outset określa ilość poza ramką obramowania, do której rozciąga się obraz
  • border-image-stretch definiuje kafelkowanie lub skalowanie środkowej i bocznej części obrazu granicy

Wniosek - CSS3 vs CSS

Dowiesz się znacznie więcej o CSS3, gdy będziesz więcej kodować. Jest jednak jedno zastrzeżenie: nie możesz opanować CSS3, jeśli nie znasz CSS. Nauka CSS3 polega na zrozumieniu i doświadczeniu z CSS. Jeśli nie znasz CSS, musisz nauczyć się go od góry wraz z CSS3. Dobrą rzeczą jest to, że jeśli nie jesteś zaznajomiony z CSS, łatwiej powinno być połączenie uczenia CSS3 z CSS razem, aby było łatwiej i szybciej.

Polecane artykuły

Oto kilka artykułów, które pomogą ci uzyskać więcej szczegółów na temat CSS3 vs CSS, więc po prostu przejdź przez link.

  1. CSS vs HTML
  2. Ekscytująca znajomość CSS Flexbox Essentials dla początkujących
  3. HTML5 vs JavaScript Najlepsza rzecz do nauczenia się
  4. CSS vs CSS3: Różnice

Kategoria:

Rozwój oprogramowania