CSS3 vs CSS - Kaskádové styly nebo CSS jsou klíčovým prvkem webového designu. Jako webový vývojář nebo návrhář musíte důkladně porozumět CSS, zejména rozdíl mezi CSS3 a CSS.

Možná jste slyšeli nebo narazili na pojem CSS3, pokud jste se dočetli o vývoji webu nebo návrhu webu. Pokud jste si někdy mysleli, jaký by mohl být rozdíl mezi CSS3 a CSS, zde budou všechny vaše pochybnosti položeny k odpočinku: Oba jsou stejné.

To je pravda: CSS3 vs. CSS se navzájem liší jako HTML a HTML5. CSS3 je prostě nejnovější iterací CSS. Lidé, kteří právě teď mluví o kódování CSS, odkazují pouze na CSS3.

HTML5 i CSS3 se obecně staly buzzwords s významy nad jejich skutečné technologie. Symbolizují dodržování určitých základních standardů ve vývoji webových stránek namísto použití proprietárního softwaru. Z velké části, humbuk kolem těchto buzzwords již zhasl. Většina společností, a to i těch, které přísahají tím, že si vše ponechá v domě, by souhlasila s tím, že dodržování těchto základních standardů usnadní život všem.

Teď už je to docela dlouho, co CSS3 bylo spuštěno a přijato jedním a všemi. To přineslo do průmyslu mnoho skvělých věcí a znamenalo docela velký krok vpřed pro vývoj webových aplikací obecně. Předchozí verze, CSS2, byla spuštěna až v roce 1998. To je téměř před 20 lety. Jediná revize, kterou získala po svém spuštění, byla v roce 2011 s názvem CSS2.1. I s revizí většina odborníků již začala říkat, že CSS3 je nevyhnutelná. CSS3 přichází s řadou funkcí a schopností, které se tehdy staly zcela nezbytnými.

Možná jste o CSS3 nevěděli, že se začal vyvíjet až rok po odeslání předchozí verze. To znamená, že W3C pracuje na vylepšené verzi od roku 1999. Vydání první stabilní verze CSS3 trvalo více než 12 let.

Mezi CSS3 a CSS jsou obrovské rozdíly (k nimž se brzy dostaneme). Faktem však je, že webové prohlížeče byly připraveny na přidání CSS3 v době, kdy byla vydána. Výsledkem bylo, že se nové verzi přizpůsobili poměrně rychle. Každý hlavní webový prohlížeč nyní podporuje CSS3, dokonce i Internet Explorer!

W3C samozřejmě stále vyvíjí CSS3 a HTML5, takže konečná verze je nepravděpodobná. Abychom byli spravedliví, konečná verze v tuto chvíli také není nutná vzhledem k tomu, jak rychle internet postupuje. S požadavky na web a samotným průmyslem roste a mění se tak rychle, kódování se musí posunout vpřed stejně rychle, ne-li více.

Infografika CSS3 vs. CSS

Definovány rozdíly CSS3 vs. CSS

Nyní, když víte něco o pozadí za CSS3, pojďme se blíže podívat, co se změnilo. Asi největším rozdílem mezi CSS3 a předchozím vydáním, které nahradilo, je oddělení modulů. V CSS2 bylo všechno jediné velké specifikace, které definovalo různé funkce. CSS3 to však změnilo zavedením několika dokumentů nazývaných moduly. Každý modul má své vlastní nové funkce, které nemají vliv na kompatibilitu předchozího stabilního vydání CSS.

Mediální dotazy

Existuje mnoho modulů, ale pouze čtyři jsou publikovány jako formální doporučení W3C. Tyto velké čtyři moduly jsou následující:

  1. Barva, zveřejněno 2011
  2. Selectors Level 3, publikováno 2011
  3. Jmenné prostory, zveřejněno 201
  4. Mediální dotazy, zveřejněno 2012

Mezi nimi je nejdůležitější modul Media dotazy. Ve skutečnosti by tento modul mohl být pravděpodobně nejdůležitějším dodatkem, který CSS3 přinesl do CSS obecně. Dotazy na média jsou poměrně jednoduché: umožňují aplikaci určitých podmínek na různé styly. To webovým stránkám umožňuje plynule nebo „reagovat“ na různé velikosti obrazovky. Jinými slovy, webové stránky mohou upravit své rozměry a prvky tak, aby vyhovovaly různým zařízením. Dnes je responzivní webový design pravděpodobně největším heslem. Vzhledem k tomu, že většina využití internetu je nyní na mobilních zařízeních, je responzivní design naprosto nezbytný a mediální dotazy k tomu přispívají. Modul také umožňuje vývojářům přizpůsobit webové stránky různým řešením bez změny nebo odstranění obsahu.

Dotazy na média lze také snadno zjistit a přidat. Jakmile je několikrát použijete, můžete si zbytek vymyslet. Zde je několik příkladů řádků kódu:

@media screen a (max-width: 600px) (

pozadí: #FFF;

)

Vypadá to dost jednoduché, že? Pomocí těchto několika řádků kódu můžete povolit styling pro obrazovky s maximální šířkou 600 pixelů. To znamená, že všechny obrazovky s maximální šířkou 600 pixelů budou zobrazovat bílé pozadí. Maximální šířka je pouze jednou z několika podmínek, které byste mohli použít pro šablonu stylů na CSS3. Další je maximální šířka zařízení. Toto je rozlišení obrazovky, nikoli oblast zobrazení. Namísto maxima lze také uvést minimální hodnotu; stačí použít 'min' místo 'max'. Můžete je také kombinovat, jak je uvedeno níže:

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

pozadí: #FFF;

)

Zde platí styl pouze pro obrazovky se zobrazovací šířkou 600–900 pixelů. CSS3 přichází s některými předdefinovanými šablonami stylů pro oblíbená mobilní zařízení, jako jsou Apple iPad a iPhone. Tady jsou některé z nich:

Nyní by mělo být jasné, jak důležité jsou mediální dotazy. Tento modul je velmi užitečný pro vývojáře, kteří chtějí vytvořit responzivní web design s co nejmenším možným množstvím kódování.

Zaoblené okraje

CSS3 také přichází s některými opravdu klíčovými aspekty návrhu webových stránek. V některých případech mohou být okraje zaokrouhleny bez hacků a CSS3 zavádí zaoblené okraje. To bylo obrovské plus pro webové vývojáře a designéry, kteří se dříve potýkali s hranicemi CSS. Není divu, že některé z těchto funkcí stále nefungují ve starých verzích aplikace Internet Explorer. Jediným dalším kódem, který potřebujete přidat do konkrétní třídy v seznamu stylů, je například:

-moz-hranice-poloměr: 5px;

-webkit-border-radius: 5px;

ohraničení: 2px pevná látka # 897048;

CSS3 tak usnadňuje život vývojáři a designérům webových stránek. Vydání také přišlo s přechody, což bylo překvapivě nedostupné v předchozích vydáních.

Doporučené kurzy

  • Online školení o webových službách v Javě
  • Profesionální vývoj her v C ++ školení
  • Program pro etické hackování
  • Výcvikový balíček Vegas Pro 13

Ohraničení obrázků, textové stíny

Mezi další prvky, které byly přidány s CSS3, ale v předchozích verzích chyběly, patřily obrázky orámování a stíny rámečků / textů. CSS3 dělala věci mnohem jednodušší, takže nebylo nutné přidávat hacky pro některý z výše uvedených běžných stylingových prvků. Zde je například osamělá řádka kódu, která se má přidat pro textové stíny:

textový stín: 2px 2px 2px # ddccb5;

Sloupce

CSS3 také zjednodušilo, jak přidat sloupce k obsahu. Nyní stačí přidat čtyři řádky kódu:

  1. počet sloupců
  2. šířka sloupce
  3. sloupcová mezera
  4. sloupcové pravidlo

Více pozadí

Nejnovější verze CSS také přidala možnost přímo zasvítit více pozadí z CSS, než používat hacky kruhového objezdu jako dříve. Tento kód je neuvěřitelně jednoduchý na zapamatování a zápis a je také velmi důležitý pro vytváření moderních prvků webového designu. Zde je příklad:

.multiplebackgrounds (

výška: 100px;

šířka: 200px;

čalounění: 20px;

pozadí: url (top.gif) vpravo nahoře bez opakování,

url (bottom.gif) opakování vlevo nahoře-y,

url (middle.gif) bottom opakování-z;

)

Předpony dodavatele

V době, kdy byl právě vydán CSS3, byly často používány předpony dodavatelů. Pomohli prohlížečům interpretovat kód CSS. Používají se dodnes, pokud váš webový prohlížeč nedokáže přečíst kód. Zde jsou předpony dodavatele pro hlavní prohlížeče:

  • -moz- : Firefox
  • -webkit- : Prohlížeče Webkit jako Apple Safari a Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Předpona opery se také stala nadbytečnou, protože společnost změnila svůj mobilní a stolní prohlížeč na platformu Webkit z vykreslovacího modulu Presto. Přestože předpona dodavatele se do určité míry nadále používá, v tomto bodě většinou zmizela.

Přidány pseudotřídy

S přidáním CSS3 jsme také dostali spoustu dalších pseudotříd, včetně strukturálních pro cílení prvků na základě jejich umístění dokumentu a vztahu k jiným různým prvkům. Tady jsou některé z nich:

  • : root se zaměřuje na kořenový prvek dokumentu
  • : not (s) targetuje prvky, které neodpovídají selektorům uvedeným v
  • : first-child zacílí na první dítě v kontejneru bez ohledu na typ položky
  • : first-of-type zacílí na první specifikovaný typ prvku v nadřazené jednotce
  • : nth-child (n) používá číselné hodnoty v rámci (n) k cílení podřízených prvků s ohledem na jejich polohu v nadřazené položce. Můžete například použít k přidání střídavých barev pozadí k komentářům blogu
  • : prázdné cílové prvky, které nemají text nebo děti, jako prázdné prvky, jako je
  • : only-child cílí na elementy ve stromě dokumentů, který je jediným podřízeným elementem v nadřazeném počítači

Nové selektory CSS3

CSS3 nabízí řadu způsobů, jak psát pravidla CSS prostřednictvím nových selektorů, nového kombinatorického a pseudoprvků: zde jsou tři nové selektory atributů:

  • Pro přesné shody element (foo = ”bar”)
  • Pro přiřazení prvku s atributem nazvaným foo začínajícím na 'bar', element (foo $ = ”bar”)
  • Pro přiřazení prvku s atributem nazvaným foo končícím na 'bar', element (foo * = ”bar”)

CSS3 přichází s několika novými pseudotřídami, z nichž některé byly diskutovány výše. Zde je několik dalších:

  • : nth-last-child (n) odpovídá přesným podřízeným prvkům z posledního
  • : nth-of-type (n) odpovídá sourozeneckým prvkům se stejným názvem před nimi ve stromu dokumentů
  • : nth-last-of-type (n) odpovídá sourozeneckým prvkům se stejným názvem zdola
  • : last-of-type zacílí na poslední určený typ prvku v nadřazené položce
  • : only-of-type zacílí na prvek, jehož je jediným typem
  • : target target elements, na které je cílený odkazující URI
  • : enabled odpovídá prvku, když je povolen
  • : disabled odpovídá prvku, když je deaktivován
  • : zaškrtnuto zacílí na prvek, když je zaškrtnuto pomocí zaškrtávacího políčka nebo přepínače

Nový kombinátor

CSS3 také přichází s úplně novým kombinátorem: elementA ~ elementB

Tento nový kombinátor se shoduje, když je elementA někde následován elementem B, ale ne bezprostředně poté.

Nové vlastnosti stylu pole

CSS3 má stejný model boxu jako předchozí verze, ale s některými novými vlastnostmi stylu, které vám pomohou stylizovat hranice a pozadí vašich boxů. Nové vlastnosti pozadí v CSS3 jsou:

  • klip na pozadí

Tato vlastnost se používá k definování způsobu oříznutí obrázku na pozadí. Výchozí ořezové rozměry jsou rámeček ohraničení, můžete ho však změnit na obsah nebo na výplň.

  • pozadí-původ

Tato konkrétní vlastnost se používá k určení, zda má být pozadí vloženo do rámečku pro ohraničení, do pole obsahu nebo do výplně.

  • pozadí

Tato vlastnost umožňuje vývojáři označit velikost obrázku na pozadí a roztáhnout menší obrázky pro přizpůsobení stránky.

CSS3 také změnil některé ze stávajících vlastností stylu pozadí. Zde je přehled změn:

  • pozadí opakovat

Tato vlastnost nyní přichází se dvěma novými hodnotami: kolo a prostor. Kolo změní měřítko obrázku tak, aby jej několikrát zabalil do krabice. Mezerou rovnoměrně mezerou kachlová obrázek v krabici bez oříznutí.

  • pozadí-příloha

Vlastnost no obsahuje „místní“ hodnotu, takže pozadí se posouvá s obsahem prvku v případě, že prvek má posuvník.

Nové vlastnosti ohraničení

CSS3 umožňuje stylizovat okraje jako dvojité, plné, přerušované nebo dokonce jako obrázek. Ohraničení obrázků je zajímavým doplňkem: umožní vám vytvořit obrázek všech čtyř ohraničení a poté sdělit CSS, aby použil obrázek na ohraničení. Zde je několik nových vlastností ohraničení, které přicházejí s CSS3:

  • poloměr ohraničení, poloměr vpravo dole, ohraničení horní-pravý poloměr, ohraničení horní-levý poloměr, ohraničení dolní-levý poloměr vám umožní vytvořit zaoblené ohraničení
  • border-image-source umožňuje určit zdrojový soubor obrazu místo použití předdefinovaných stylů ohraničení
  • border-image-slice představuje vnitřní posuny od okrajů okrajových obrázků
  • width-image-width definuje hodnotu šířky pro váš okrajový obrázek
  • border-image-outset určuje částku za hraničním rámečkem, na který se obraz rozšiřuje
  • ohraničení obrazu ohraničení definuje obklad nebo měřítko střední a boční části obrázku ohraničení

Závěr - CSS3 vs. CSS

O kódech CSS3 se dozvíte mnohem více. Ale je tu jedna výzva: nemůžete ovládat CSS3, pokud neznáte CSS. Učení CSS3 zahrnuje budování na vašem porozumění a zkušenosti s CSS. Pokud neznáte CSS, musíte se to naučit shora spolu s CSS3. Dobrá věc je, že pokud nejste obeznámeni s CSS, mělo by být snazší spojit učení CSS3 vs CSS, aby bylo snazší a rychlejší.

Doporučené články

Zde je několik článků, které vám pomohou získat více podrobností o CSS3 vs CSS, takže stačí projít odkaz.

  1. CSS vs. HTML
  2. Je zajímavé znát základy CSS Flexbox pro začátečníky
  3. HTML5 vs JavaScript Nejlepší věc, kterou se naučit
  4. CSS vs CSS3: Rozdíly

Kategorie:

Vývoj softwaru