Nowoczesna strona internetowa składa się z trzech różnych plików lub kodów, HTML, JavaScript i CSS. HTM definiuje strukturę strony internetowej; JavaScript określa, jak strona będzie się zachowywać; a CSS określa ogólny wygląd i styl strony. Specyfikacje CSS są utrzymywane przez W3C. Z jednej strony mamy wersję podstawową, a z drugiej najnowszą i potężną CSS3. Przyjrzyjmy się różnicom między nimi.

Czym jest CSS?

CSS to skrót od Cascading Style Sheets (kaskadowe arkusze stylów). Daje ci kreatywną kontrolę nad ogólnym projektem i układem twoich stron internetowych. Celem CSS jest usprawnienie procesu stylizacji stron internetowych. CSS jest prostym językiem projektowania, który pozwala na tworzenie przyciągających wzrok stron internetowych. Pomaga on określić takie rzeczy jak kolor, czcionka, pozycjonowanie pewnych elementów i trochę animacji. Jeśli używałeś stylów w takich edytorach tekstu jak Microsoft Word lub programach do układania stron jak Adobe InDesign, CSS będzie dla Ciebie znajomy. Każdy element wizualny na stronie, taki jak tło, ramki, tekst, nagłówek i stopka, dosłownie wszystko może być zmienione za pomocą CSS.

Co to jest CSS3?

CSS3 jest najnowszą iteracją języka Kaskadowych Arkuszy Stylów, a liczba 3 nie jest tylko odniesieniem do nowych funkcji w CSS, ale trzecim poziomem w postępie specyfikacji CSS. CSS3 jest nową modułową wersją specyfikacji CSS z kilkoma ekscytującymi nowymi funkcjami, które sprawią, że twoje wysiłki związane z projektowaniem stron internetowych wejdą na zupełnie nowy poziom, czyniąc je łatwiejszymi i bardziej elastycznymi. Jest to nowy termin używany do opisania nowych cech i funkcjonalności CSS, które pojawiły się w ciągu ostatnich kilku lat. Część tej nowej funkcjonalności jest wynikiem ciągłego rozwoju CSS przez W3C, a inna część jest napędzana przez nową generację przeglądarek, które są specjalnie przystosowane do dostarczania projektantom potężniejszych narzędzi do tworzenia stron. Przynosi ona mnóstwo nowych funkcji i dodatków, takich jak zaawansowane selektory, zaokrąglone rogi, nowe układy, animacje lub przejścia, cienie, gradienty, wybór kolorów i wiele innych.

Różnica między CSS3 a CSS

Selektory

– Selektory są w samym sercu Kaskadowych Arkuszy Stylów, które są w zasadzie wzorcami używanymi do wybierania elementów HTML, które chcesz stylizować. CSS3 zawiera cały nowy, solidny zestaw zaawansowanych selektorów, które pozwalają na wybranie bardziej specyficznych elementów do stylizacji, eliminując potrzebę stosowania arbitralnych identyfikatorów i klas, które tak często dołączasz. Z tak szerokim zakresem selektorów, możesz wybrać prawie każdy element strony. CSS3 rozszerza podstawową funkcjonalność selektorów atrybutów, pozwalając na wybieranie elementów na podstawie ciągów znaków w wartościach atrybutów.

Kolory

– CSS3 oferuje kilka nowych, ekscytujących sposobów na zabawę z kolorami. Wcześniej, kolory były deklarowane przy użyciu formatu szesnastkowego – systemu numeracji zaczynającego się od 00 i kończącego na FF. Specyfikacja kolorów CSS3 definiuje rozszerzoną listę słów kluczowych koloru, które są obsługiwane przez przeglądarki internetowe. Lista ta zawiera teraz dodatkowe 147 słów kluczowych koloru oraz nowy model o nazwie „RGBA” (dodatek alfa), który pozwala na określenie nieprzezroczystości koloru. Najważniejszą zmianą jest to, że można teraz deklarować kolory półprzezroczyste.

Border-Radius

– Właściwość CSS border-radius definiuje zaokrąglone rogi dowolnego elementu, pozwalając na łatwe wykorzystanie zaokrąglonych rogów w twoich elementach projektu. Z CSS3, możesz nawet używać obrazów dla granic i tworzyć zaokrąglone rogi na swoich granicach bez obrazów lub dodatkowych znaczników. Posiada również dodatki do właściwości tła, takie jak możliwość posiadania wielu teł i ulepszeń do kontrolowania rozmiaru obrazu tła, orientacji i przycinania. Właściwość box shadow pozwala dodać cienie kropli do elementów.

Formatowanie tekstu

– CSS3 dostarcza mnóstwo właściwości formatowania tekstu, wiele z nich jest już obecnych w CSS2, ale z kilkoma dodatkowymi cechami, takimi jak nowa właściwość text shadow. Ta nowa właściwość cienia tekstu pozwala na dodanie cienia do poszczególnych znaków w węzłach tekstowych. Efekt cienia dla tekstu sprawia, że strona internetowa wygląda bardziej żywo i atrakcyjnie. Przed CSS3 zrobiłbyś to samo, używając obrazu lub zduplikowanego elementu tekstowego, a następnie pozycjonując go.

Gradienty

– Gradienty są jedną z najbardziej oczekiwanych funkcji, które stały się natywne dla CSS. Są to niesamowicie potężne dodatki do CSS, które pozwalają na ustawienie koloru tła elementu na gradient. Możesz użyć zwykłego, prostego dwukolorowego gradientu lub możesz pójść na całość używając wielu ograniczników koloru i różnych poziomów krycia w całym gradiencie. Gradienty mogą być liniowe lub radialne i tworzą efekty wizualne, które są tak bogate wizualnie jak gradienty w innych technologiach, takich jak SVG.

Przejścia i animacje

– CSS3 posiada kolejną interesującą cechę zwaną przejściami, która zapewnia sposób kontrolowania szybkości animacji podczas przechodzenia z jednej wartości właściwości CSS do drugiej. Na przykład, możesz animować wysokość elementu od zera pikseli do stu pikseli, aby ujawnić zawartość elementu. Animacje CSS3 mają własną specyfikację i pozwalają na tworzenie klatek kluczowych do sterowania animacjami oraz właściwości, które pozwalają kontrolować czas, czas trwania i zapętlenie animacji.

Podsumowanie CSS3 vs CSS

CSS3 jest, pod każdym względem, godnym następcą, który zawiera wiele interesujących nowych funkcji, które pomogą w twoich przedsięwzięciach związanych z projektowaniem stron internetowych. Posiada wiele potężnych funkcji, które sprawiają, że twoja praca przy projektowaniu stron internetowych jest prostsza, łatwiejsza i bardziej elastyczna niż kiedykolwiek. CSS3 nie tylko dostarcza użytkownikom mnóstwo nowych, ekscytujących funkcji do zabawy, ale także zapewnia bardziej elastyczne sposoby rozwiązywania istniejących problemów. W CSS3 jest obecnie ponad 40 modułów na różnych etapach ukończenia i obsługi przez przeglądarki. Dla jednego, CSS3 zawiera cały nowy zestaw narzędzi zaawansowanych selektorów, które pozwalają na wybranie bardziej specyficznych elementów do stylizacji.