CSS3 vs CSS - Kaskádové štýly alebo CSS sú kľúčovým prvkom webdizajnu. Ako webový vývojár alebo dizajnér musíte mať dôkladnú znalosť CSS, najmä rozdiel medzi CSS3 a CSS.

Možno ste už počuli alebo narazili na výraz CSS3, ak ste sa dočítali o vývoji webových stránok alebo webovom dizajne. Ak ste si niekedy mysleli, aký by mohol byť rozdiel medzi CSS3 verzus CSS, všetky vaše pochybnosti si položíte tu: sú rovnaké.

Správne: CSS3 verzus CSS sa navzájom líšia ako HTML a HTML5. CSS3 je jednoducho najnovšou iteráciou CSS. Ľudia, ktorí práve teraz hovoria o kódovaní CSS, sa v skutočnosti len odvolávajú na CSS3.

HTML5 aj CSS3 sa vo všeobecnosti stali buzzwordsmi, ktorých významy presahujú ich skutočné technológie. Symbolizujú dodržiavanie určitých základných štandardov vo vývoji webových stránok namiesto použitia proprietárneho softvéru. Z väčšej časti humbuk okolo týchto buzzwords už zmizol. Väčšina spoločností, dokonca aj tých, ktoré prisahajú, že budú mať všetko v prevádzke, by súhlasilo s tým, že dodržiavanie týchto základných noriem uľahčuje život všetkým.

Teraz je to už dosť dávno, čo bol CSS3 spustený a akceptovaný jedným a všetkým. To prinieslo veľa skvelých vecí do odvetvia a znamenalo celkom veľký krok vpred pre vývoj webových aplikácií všeobecne. Predchádzajúca verzia, CSS2, bola uvedená na trh v roku 1998. To je takmer pred 20 rokmi. Jediná revízia, ktorú dostala po svojom zavedení, bola v roku 2011 s názvom CSS2.1. Dokonca aj po revízii väčšina odborníkov už začala hovoriť, že CSS3 je nevyhnutná. CSS3 prišiel s radom funkcií a schopností, ktoré sa dovtedy stali nevyhnutnými.

Možno ste nevedeli o CSS3, že sa začal vyvíjať až rok po predložení predchádzajúcej verzie. To znamená, že W3C pracuje na vylepšenej verzii od roku 1999. Vydanie prvej stabilnej verzie CSS3 trvalo viac ako 12 rokov.

Medzi CSS3 a CSS sú obrovské rozdiely (čoskoro sa dostaneme). Faktom je, že webové prehliadače boli pripravené na pridanie do CSS3 už v čase vydania. V dôsledku toho sa prispôsobili pomerne rýchlo novému vydaniu. Každý hlavný webový prehliadač teraz podporuje CSS3, dokonca aj Internet Explorer!

W3C samozrejme stále pokračuje vo vývoji CSS3 a HTML5, takže konečná verzia je nepravdepodobná. Aby sme boli spravodliví, konečná verzia nie je v tejto chvíli nutnosťou ani vzhľadom na to, ako rýchlo internet napreduje. Keďže požiadavky na web a samotné odvetvie rastú a menia sa tak rýchlo, kódovanie musí napredovať tak rýchlo, ak nie viac.

Infografika CSS3 verzus CSS

Definované rozdiely medzi CSS3 a CSS

Keď už viete niečo o pozadí za CSS3, pozrime sa bližšie na to, čo sa zmenilo. Asi najväčším rozdielom medzi CSS3 a predchádzajúcim vydaním, ktoré nahradilo, je oddelenie modulu. V CSS2 bolo všetko jednou veľkou špecifikáciou, ktorá definovala rôzne vlastnosti. CSS3 to však zmenila zavedením niekoľkých dokumentov nazývaných moduly. Každý modul má svoje vlastné nové funkcie, ktoré nemajú vplyv na kompatibilitu predchádzajúceho stabilného vydania CSS.

Mediálne otázky

K dispozícii je veľa modulov, ale iba štyri sú publikované ako formálne odporúčania W3C. Tieto veľké štyri moduly sú nasledujúce:

  1. Farba, zverejnené 2011
  2. Selektory úrovne 3, zverejnené 2011
  3. Mená, uverejnené 201
  4. Mediálne otázky, zverejnené v roku 2012

Najdôležitejším z nich sú mediálne dotazy. V skutočnosti by tento modul mohol byť pravdepodobne najdôležitejším doplnkom, ktorý CSS3 priniesol do CSS všeobecne. Mediálne dotazy sú dosť jednoduché: umožňuje aplikovať určité podmienky na rôzne štýly. To webovým stránkam umožňuje plynulosť alebo „schopnosť reagovať“ na rôzne veľkosti obrazovky. Inými slovami, webové stránky môžu prispôsobiť svoje rozmery a prvky tak, aby vyhovovali rôznym zariadeniam. Dnes je responzívny webdizajn pravdepodobne najväčším heslom. Vzhľadom na to, že väčšina používania internetu je teraz na mobilných zariadeniach, je responzívny dizajn absolútne nevyhnutný a mediálne otázky to dosahujú. Modul tiež umožňuje vývojárom prispôsobiť webové stránky rôznym rozlíšením bez zmeny alebo odstránenia obsahu.

Dotazy na médiá sa tiež dajú ľahko zistiť a pridať. Akonáhle ich niekoľkokrát použijete, môžete si prísť na zvyšok. Tu je niekoľko príkladov riadkov kódu:

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

pozadie: #FFF;

)

Vyzerá dosť jednoducho, však? Pomocou týchto niekoľkých riadkov kódu môžete povoliť styling pre obrazovky so šírkou maximálne 600 pixlov. To znamená, že na všetkých obrazovkách so šírkou maximálne 600 pixlov sa zobrazí biele pozadie. Maximálna šírka je len jednou z niekoľkých podmienok, ktoré by ste mohli použiť na šablónu so štýlmi na CSS3. Ďalšou je maximálna šírka zariadenia. Toto je rozlíšenie obrazovky a nie oblasť prezerania. Namiesto maxima sa môže uviesť aj minimálna hodnota; stačí použiť 'min' namiesto 'max'. Môžete tiež kombinovať tieto dve možnosti, ako je uvedené nižšie:

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

pozadie: #FFF;

)

V tomto prípade platí styling iba pre obrazovky so šírkou pozorovania 600 - 900 pixelov. CSS3 prichádza s niektorými preddefinovanými šablónami štýlov pre populárne mobilné zariadenia, ako sú Apple iPad a iPhone. Tu je niekoľko z nich:

Teraz by malo byť celkom jasné, aké dôležité sú mediálne otázky. Tento modul je veľmi užitočný pre vývojárov, ktorí chcú vytvoriť responzívny webový dizajn s čo najmenším množstvom kódovania.

Zaoblené hranice

CSS3 tiež prichádza s niekoľkými skutočne kľúčovými aspektmi webdizajnu. Napríklad, hranice môžu byť zaoblené bez hacks s CSS3 zavedenie zaoblené hranice. To bolo obrovské plus pre vývojárov webu a dizajnérov, ktorí predtým zápasili s hranicami CSS. Niet divu, že niektoré z týchto funkcií stále nefungujú v starých verziách programu Internet Explorer. Jediný ďalší kód, ktorý potrebujete pridať do konkrétnej triedy v šablóne so štýlmi, je napríklad:

-moz-hraničný-polomer: 5px;

-webkit-border-radius: 5px;

hranica: 2px pevná látka # 897048;

Vďaka CSS3 je život vývojárom a dizajnérom webových stránok oveľa jednoduchší. Vydanie tiež prišlo s prechodmi, čo bolo prekvapivo nedostupné v predchádzajúcich vydaniach.

Odporúčané kurzy

  • Online školenie o webových službách v jazyku Java
  • Profesionálny vývoj hier v tréningu C ++
  • Program pre etický hacking
  • Tréningový balík Vegas Pro 13

Orámovanie obrázkov, textové tiene

Medzi ďalšie prvky, ktoré boli pridané s CSS3, ale v predchádzajúcich verziách chýbali, patria obrázky orámovania a tiene polí / textov. CSS3 veci značne zjednodušila, takže nebolo potrebné pridávať hacky pre niektorý z vyššie uvedených bežných prvkov štýlu. Napríklad tu je osamelý riadok kódu, ktorý sa má pridať do textových tieňov:

textový tieň: 2px 2px 2px # ddccb5;

stĺpce

CSS3 tiež zjednodušilo pridávanie stĺpcov do obsahu. Všetko, čo musíte urobiť, je pridať štyri riadky kódu:

  1. Kolóna-count
  2. stĺpec šírky
  3. stĺpec medzery
  4. stĺpec-pravidlo

Viacnásobné pozadie

Najnovšie vydanie CSS tiež pridalo možnosť priamo zasvätiť viac pozadí z CSS namiesto použitia okrúhlych kruhov ako predtým. Tento kód je neuveriteľne jednoduchý na zapamätanie a zapisovanie a je tiež veľmi dôležitý pri vytváraní moderných prvkov webdizajnu. Tu je príklad:

.multiplebackgrounds (

výška: 100px;

šírka: 200px;

čalúnenie: 20px;

pozadie: url (top.gif) vpravo hore bez opakovania,

url (bottom.gif) opakovanie vľavo hore-y,

url (middle.gif) bottom opakovanie-z;

)

Predpony dodávateľov

Predvoľby dodávateľa sa často používali v čase, keď sa práve CSS3 uvoľnil. Pomáhali prehliadačom interpretovať kód CSS. Používajú sa dodnes, ak váš webový prehľadávač nedokáže prečítať kód. Tu sú predpony dodávateľov pre hlavné prehliadače:

  • -moz- : Firefox
  • -webkit- : Prehliadače Webkit ako Apple Safari a Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Predpona opery sa stala tiež zbytočnou, pretože spoločnosť zmenila svoj mobilný a stolný prehľadávač na platformu Webkit z vykresľovacieho modulu Presto. Aj keď sa predpona dodávateľa do určitej miery naďalej používa, v tomto bode väčšinou zmizla.

Pridané pseudotriedy

S doplnkom CSS3 sme dostali aj množstvo ďalších pseudotried, vrátane štruktúrovaných pre zameriavacie prvky na základe ich polohy dokumentu a vzťahu k iným rôznym prvkom. Tu je niekoľko z nich:

  • : root sa zameriava na koreňový prvok dokumentu
  • : nie je zacielený na prvky, ktoré nezodpovedajú selektory uvedené v zozname
  • : first-child zacieľuje na prvé dieťa v kontajneri bez ohľadu na typ položky
  • : first-of-type zacieľuje na prvý špecifikovaný typ prvku v rámci rodiča
  • : nth-child (n) používa číselné hodnoty v rámci (n) na zacieľovanie podriadených prvkov vzhľadom na ich pozíciu v rodičovi. Môžete to napríklad použiť na pridanie alternatívnych farieb pozadia k komentárom blogu
  • : prázdne cieľové prvky, ktoré neobsahujú text alebo deti, napríklad prázdne prvky, ako napríklad
  • : only-child sa zameriava na prvky v strome dokumentu, ktorý je jediným podriadeným prvkom v rodičovi

Nové selektory CSS3

CSS3 ponúka niekoľko spôsobov, ako napísať pravidlá CSS prostredníctvom nových selektorov, nového kombinačného a pseudoprvkov: tu sú tri nové selektory atribútov:

  • Pre presné zhody element (foo = ”bar”)
  • Na priradenie prvku s atribútom nazývaným foo začínajúcim na 'bar', element (foo $ = ”bar”)
  • Na priradenie prvku k atribútu nazývanému foo končiaci na 'bar', element (foo * = ”bar”)

CSS3 prichádza s niekoľkými novými pseudotriedami, z ktorých niektoré boli diskutované vyššie. Tu je niekoľko ďalších:

  • : n-posledné dieťa (n) zodpovedá presným detským prvkom z posledného
  • : nth-of-type (n) sa zhoduje s súrodeneckými prvkami, ktoré majú pred stromom dokumentu rovnaké meno
  • : n-tý posledný typ (n) zodpovedá súrodeneckým prvkom s rovnakým názvom zdola
  • : last-of-type zacieľuje na posledný určený typ prvku v rodičovi
  • : typ iba zacieľuje na prvok, ktorého je jediným typom
  • : cieľové cieľové prvky, na ktoré je zacielený sprostredkujúci URI
  • : enabled sa zhoduje s prvkom, keď je povolený
  • : disabled sa zhoduje s prvkom, keď je deaktivovaný
  • : zaškrtnuté zacieľuje na prvok, keď je začiarknuté pomocou začiarkavacieho políčka alebo prepínača

Nový kombinátor

CSS3 tiež prichádza s úplne novým kombinátorom: elementA ~ elementB

Tento nový kombinátor sa zhoduje, keď je prvok A niekde následne nasledovaný prvkom B, ale nie bezprostredne potom.

Nové vlastnosti štýlu poľa

CSS3 má rovnaký model boxu ako predchádzajúce vydanie, ale obsahuje niektoré nové vlastnosti štýlu, ktoré vám pomôžu upraviť hranice a pozadie vašich polí. Nové vlastnosti pozadia v CSS3 sú:

  • background-clip

Táto vlastnosť sa používa na definovanie spôsobu orezania obrázka na pozadí. Predvolené orezové rozmery sú orámovanie, môžete ich však zmeniť na obsah alebo na výplň.

  • background-origin

Táto konkrétna vlastnosť sa používa na určenie, či by sa pozadie malo vložiť do rámčeka na ohraničenie, do rámčeka obsahu alebo do výplňového rámčeka.

  • background-size

Táto vlastnosť umožňuje vývojárovi označiť veľkosť obrázka na pozadí a roztiahnuť menšie obrázky na prispôsobenie sa stránke.

CSS3 tiež zmenil niektoré z existujúcich vlastností štýlu pozadia. Tu je prehľad zmien:

  • background-repeat

Táto vlastnosť teraz obsahuje dve nové hodnoty: okrúhle a medzerové. Okrúhly obrázok zmení veľkosť obrázka tak, aby ho v rámčeku niekoľkokrát upravil. Medzerník rovnomerne rozloží kachľový obrázok v rámčeku bez orezania.

  • background-attachment

Vlastnosť č. Obsahuje „miestnu“ hodnotu, takže pozadie sa posúva s obsahom prvku v prípade, že prvok má posuvnú lištu.

Nové vlastnosti okrajov

CSS3 umožňuje, aby boli hranice ohraničené ako dvojité, plné, prerušované alebo dokonca ako obrázok. Obrázky orámovania sú zaujímavým doplnkom: umožňujú vám vytvoriť obrázok všetkých štyroch ohraničení a potom povedia CSS, aby použil obrázok na orámovanie. Tu je niekoľko nových vlastností okrajov, ktoré prichádzajú s CSS3:

  • polomer orámovania, polomer ohybu vpravo dole, orámovanie okraje zhora-doprava-polomer, hranica-horný-ľavý-polomer, polomer-dolný-ľavý-polomer vám umožňujú vytvárať zaoblené hranice
  • border-image-source vám umožňuje určiť zdrojový súbor obrázka namiesto použitia preddefinovaných štýlov ohraničenia
  • Ohraničenie obrazu okraja predstavuje posuny dovnútra od okrajov obrázkov orámovania
  • width-image-width definuje hodnotu šírky pre váš okrajový obrázok
  • border-image-outset určuje čiastku za rámčekom, na ktorý sa obrázok rozširuje
  • stretch-border-stretch definuje obklad alebo mierku strednej a bočnej časti obrazu okraja

Záver - CSS3 vs. CSS

O kódoch CSS3 sa dozviete omnoho viac. Je tu však jedna výzva: nemôžete ovládať CSS3, pokiaľ nepoznáte CSS. Učenie sa CSS3 zahŕňa budovanie na vašom porozumení a skúsenostiach s CSS. Ak nepoznáte CSS, musíte sa ho naučiť zhora spolu s CSS3. Dobrá vec je, že ak nie ste oboznámení s CSS, malo by byť ľahšie spojiť obe učenia CSS3 vs CSS, aby sa uľahčilo a zrýchlilo.

Odporúčané články

Tu je niekoľko článkov, ktoré vám pomôžu získať viac podrobností o CSS3 verzus CSS, takže stačí prejsť na odkaz.

  1. CSS verzus HTML
  2. Je vzrušujúce poznať základy aplikácie Flexbox CSS pre začiatočníkov
  3. HTML5 vs JavaScript Najlepšie veci, ktoré sa treba naučiť
  4. CSS vs CSS3: Rozdiely

Kategórie:

Vývoj softvéru