CSS3 vs CSS - Kaskadni listovi stilova ili CSS ključni su element web dizajna. Kao web programer ili dizajner, morate dobro razumjeti CSS, posebno razliku između CSS3 i CSS.

Možda ste čuli ili naišli na pojam CSS3 ako ste pročitali o web razvoju ili web dizajnu. Ako ste ikad pomislili što bi različito moglo biti između CSS3 u odnosu na CSS, evo gdje će sve vaše sumnje počivati: obojica su ista.

Točno tako: CSS3 i CSS razlikuju se međusobno kao HTML i HTML5. CSS3 je jednostavno najnovija iteracija CSS-a. Ljudi koji upravo sada govore o kodiranju CSS-a zapravo se samo odnose na CSS3.

I HTML5 i CSS3 su u pravilu postali jezične riječi, sa značenjima koja nadilaze stvarne tehnologije. Oni simboliziraju pridržavanje određenih temeljnih standarda u web razvoju umjesto da koriste vlasnički softver. Za većinu, hype oko ovih glasina već je umro. Većina tvrtki, čak i one koje se zakune da će sve držati u kući, složila bi se da se pridržavanjem ovih osnovnih standarda život svima puno olakšava.

Sada je prošlo dosta vremena od kada su CSS3 pokrenuli i prihvatili svi i svi. Donio je mnogo sjajnih stvari u industriji i označio prilično velik korak naprijed za razvoj web općenito. Prethodna verzija, CSS2, pokrenuta je još 1998. godine. To je bilo prije gotovo 20 godina. Jedina revizija koju je dobio nakon njegovog pokretanja bila je 2011. godine, a zove se CSS2.1. Još s revizijom, većina stručnjaka je već počela govoriti da je CSS3 neizbježan. CSS3 je dobio brojne značajke i mogućnosti koje su do tada postale nužno potrebne.

Ono što možda niste znali o CSS3-u je da je počeo s razvojem samo godinu dana nakon što je predata njegova prethodna verzija. To znači da je W3C na poboljšanoj verziji radio od 1999. godine. Za puštanje prve stabilne verzije CSS3-a trebalo je više od 12 godina.

Između CSS3 i CSS-a postoje velike razlike (o kojima ćemo uskoro doći). Ali činjenica je da su web-preglednici već bili spremni za nadogradnje CSS3-u do trenutka kada je objavljen. Kao rezultat, prilagodili su se brzo novom izdanju. Svaki glavni web preglednik sada podržava CSS3, čak i Internet Explorer!

Naravno, W3C i dalje nastavlja razvijati CSS3 i HTML5, pa konačna verzija nije vjerojatna. Da budemo pravedni, konačna verzija trenutno također nije nužna, s obzirom na to koliko brzo napreduje internet. Budući da zahtjevi za webom i sama industrija raste i mijenja se tako brzo, kodiranje se mora pomicati jednako brzo, ako ne i više.

CSS3 vs CSS Infographics

Definirane razlike u CSS3 u odnosu na CSS

Sada kada znate malo o pozadini iza CSS3, pogledajmo bliže što se promijenilo. Možda je najveća razlika između CSS3 i prethodnog izdanja koje je zamijenio razdvajanje modula. U CSS2 sve je bila jedna velika specifikacija koja je definirala različite značajke. No, CSS3 je to promijenio uvodeći nekoliko dokumenata koji se nazivaju modulima. Svaki modul ima svoje nove mogućnosti koje ne utječu na kompatibilnost prethodnog stabilnog CSS izdanja.

Media upiti

Na raspolaganju je puno modula, ali samo su četiri objavljena kao formalne preporuke W3C-a. Ova četiri velika modula su sljedeća:

  1. Boja, objavljeno 2011
  2. Selektori Razina 3, objavljeno 2011
  3. Objavljeno 201
  4. Media upita, objavljen 2012

Među njima je najvažniji modul Media upiti. U stvari, ovaj bi modul mogao biti najvažniji dodatak koji je CSS3 donio CSS-u općenito. Upiti u medijima djeluju prilično jednostavno: omogućava primjenu određenih uvjeta na različitim tablicama stilova. To omogućava web lokacijama da budu fluidne ili "osjetljive" na različite veličine zaslona. Drugim riječima, web stranice mogu prilagoditi svoje dimenzije i elemente kako bi se uklopili u različite uređaje. Danas je responzivni web dizajn vjerojatno najveća glazba. S obzirom da je većina interneta sada korištena na mobilnim uređajima, responzivni dizajn je apsolutno neophodan i medijski upiti pomažu u tome. Modul također omogućava programerima da prilagode web stranice različitim razlikama bez promjene ili uklanjanja sadržaja.

Medijska je pitanja također prilično lako otkriti i dodati. Jednom kada ih upotrijebite nekoliko puta, ostatak možete prilično smisliti. Evo nekoliko primjera redaka koda:

@media zaslon i (max. širina: 600px) (

pozadina: #FFF;

)

Čini se dovoljno jednostavno, zar ne? S ovih nekoliko redaka koda, možete omogućiti styling za zaslone širine od najviše 600 piksela. To znači da će na svim ekranima s maksimalnom širinom od 600 piksela biti prikazana bijela pozadina. Maksimalna širina samo je jedan od nekoliko uvjeta koje možete primijeniti na listu stilova na CSS3. Drugi je maksimalna širina uređaja. Ovo je razlučivost zaslona, ​​a ne područje gledanja. Također, umjesto maksimalne može biti navedena minimalna vrijednost; samo koristite 'min' umjesto 'max'. Također možete kombinirati dvije, kao u nastavku:

@media zaslon i (minimalna širina: 600px) i (max. širina: 900px) (

pozadina: #FFF;

)

Ovdje se stil odnosi samo na ekrane širine gledanja od 600-900 piksela. CSS3 dolazi s nekim unaprijed definiranim stilovima tablice za popularne mobilne uređaje, poput Apple iPada i iPhonea. Ovo su neki od njih:

Do sad bi trebalo biti posve jasno koliko su važni medijski upiti. Ovaj je modul vrlo koristan za programere koji žele stvoriti responzivan web dizajn s najmanje moguće količine kodiranja.

Zaobljene granice

CSS3 također dolazi s nekim doista ključnim razmatranjima web dizajna. Na primjer, granice se mogu zaokružiti bez hakova, a CSS3 uvodi zaobljene obrube. Ovo je bio veliki plus za web programere i dizajnere koji su se i prije borili s CSS-ovim granicama. Nije iznenađujuće da neke od ovih značajki još uvijek ne rade u starim verzijama Internet Explorera. Jedini dodatni kod koji trebate dodati određenoj klasi unutar stilskog lista je, na primjer:

-moz-granični radijus: 5px;

-webkit-border-radijus: 5px;

obrub: 2px krutina # 897048;

Stoga, CSS3 znatno olakšava život web programeru i dizajneru. Izdanje je također dolazilo sa gradijentima, što je bilo iznenađujuće nedostupno u prethodnim izdanjima.

Preporučeni tečajevi

  • Online obuka o web uslugama na Javi
  • Profesionalni razvoj igara u C ++ treningu
  • Program etičkog hakiranja
  • Vegas Pro 13 paket treninga

Slike obruba, tekstualne sjene

Ostali elementi koji su dodani CSS3, ali nedostaju u prethodnim verzijama, uključuju slike okvira i sjene okvira / teksta. CSS3 je stvari učinio mnogo jednostavnijim, uklanjajući potrebu za dodavanjem hakova za bilo koji od gore navedenih stilskih elemenata. Na primjer, ovdje je solitarna linija koda koju treba dodati za tekstne sjene:

sjena teksta: 2px 2px 2px # ddccb5;

Kolumne

CSS3 je također pojednostavio kako dodati stupce u sadržaj. Sve što trebate učiniti je dodati četiri retka koda:

  1. kolona-count
  2. stupac širine
  3. kolona-gap
  4. stupac pravilo

Višestruka pozadina

Najnovije CSS izdanje također je dodalo mogućnost izravnog insajdera višestrukih pozadina od CSS-a, umjesto korištenja kružnih hakova kao prije. Kôd je nevjerojatno jednostavan za pamćenje i pisanje, a također je vrlo važan za stvaranje modernih elemenata web dizajna. Evo primjera:

.multiplebackgrounds (

visina: 100px;

širina: 200px;

padding: 20px;

pozadina: url (top.gif) gore desno, ne-ponavljati,

url (odozdo.gif) gore lijevo ponovite-y,

url (srednja.gif) dno ponavljanje-z;

)

Prefiksi dobavljača

Prefiksi dobavljača često su korišteni u vrijeme kad je CSS3 tek izašao. Pomogli su preglednicima u tumačenju CSS koda. Koriste se do danas, u slučaju da vaš web preglednik ne može pročitati kod. Evo prefiksa dobavljača za glavne preglednike:

  • -moz- : Firefox
  • -webkit- : preglednici webkita kao što su Apple Safari i Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Operov prefiks također je postao suvišan jer je tvrtka iz svojeg mehanizma za prikazivanje Presto prebacila mobilni i desktop preglednik na platformu Webkit. Iako se prodajni prefiks i nadalje koristi u određenoj mjeri, u ovom je trenutku uglavnom nestao.

Dodane pseudo-klase

Uz CSS3, dobili smo i puno dodatnih pseudo klasa, uključujući strukturne za ciljanje elemenata na temelju njihovog položaja dokumenta i odnosa prema drugim različitim elementima. Ovo su neki od njih:

  • : root cilja korijenski element dokumenta
  • : nisu (i) ciljni elementi koji nisu odabrani od strane odabirača navedenih u (s)
  • : prvo dijete cilja prvo dijete u spremniku bez obzira na vrstu predmeta
  • : prva vrsta cilja prvu određenu vrstu elementa unutar roditelja
  • : nth-dijete (n) koristi numeričke vrijednosti unutar (n) da cilja dječje elemente u odnosu na njihov položaj u roditelju. Na primjer, ovo možete upotrijebiti za dodavanje izmjeničnih boja pozadina u komentare na blogu
  • : prazni ciljni elementi koji nemaju tekst ili djecu, poput praznih elemenata poput
  • : Only-child cilja elemente u stablu dokumenta koji je jedini podređeni element unutar roditelja

Novi CSS3 selektori

CSS3 nudi nekoliko načina za upisivanje CSS pravila putem novih odabirača, novih kombinatornih i pseudo-elemenata: evo tri nova odabira atributa:

  • Za točna podudaranja, element (foo = "traka")
  • Za podudaranje elementa s atributom zvanim foo koji počinje s 'bar', element (foo $ = "bar")
  • Za podudaranje elementa s atributom zvanim foo koji završava s "bar", element (foo * = "bar")

CSS3 dolazi s nekoliko novih pseudo-klasa, o nekima od kojih je gore spomenuto. Evo još nekoliko:

  • : nth-last-dijete (n) odgovara točnim podređenim elementima iz posljednjeg
  • : nth-of-type (n) odgovara elementima sebli s istim nazivom prije njih u stablu dokumenata
  • : nth-last-of-type (n) odgovara elementima sestri s istim nazivom s donje strane
  • : zadnja vrsta tipa cilja zadnju specificiranu vrstu elementa unutar roditelja
  • : samo-vrste cilja element čiji je jedini tip
  • : ciljni ciljni elementi na koje cilja URI koji se poziva
  • : omogućeno odgovara elementu kada je omogućeno
  • : invalid odgovara elementu kada je onemogućen
  • : označeno cilja element kada se provjerava putem potvrdnog okvira ili radio gumba

Novi kombinator

CSS3 također dolazi s potpuno novim kombinatorikom: elementA ~ elementB

Ovaj se novi kombinator podudara kad elementA slijedi negdje nakon toga element B, ali ne odmah nakon toga.

Nova svojstva stila kutije

CSS3 ima isti model okvira kao i prethodno izdanje, ali s nekim novim stilskim svojstvima koja vam pomažu u stiliziranju obruba i pozadine kutija. Nove pozadinske osobine u CSS3 su:

  • pozadine-isječak

Ovo svojstvo koristi se za definiranje načina snimanja pozadinske slike. Zadane dimenzije izrezivanja su obrubni okvir, ali možete ga promijeniti u okvir sa sadržajem ili okvir za oblaganje.

  • Pozadina-podrijetla

To se određeno svojstvo koristi za određivanje treba li pozadinu staviti u obrubni okvir, okvir sadržaja ili podlogu.

  • Pozadina veličine

Ovo svojstvo omogućuje programeru da navede veličinu pozadinske slike i istegne manje slike za uklapanje stranice.

CSS3 je također promijenio neka od postojećih svojstava stila pozadine. Evo promjena promjena:

  • background-repeat

Ovo svojstvo sada sadrži dvije nove vrijednosti: zaokruživanje i razmak. Okrugla prilagodi veličinu slike tako da je nekoliko puta nalijepi na okvir. Prostor ravnomjerno raspoređuje popločanu sliku unutar okvira bez isječaka.

  • Pozadina-pričvršćivanje

Svojstvo svojstva ne uključuje vrijednost "lokalno" tako da se pozadina pomiče sa sadržajem elementa u slučaju da element ima pomičnu traku.

Nova svojstva granice

CSS3 omogućuje da se obrube oblikuju kao dvostruke, čvrste, isprekidane ili čak kao slike. Slike obruba zanimljiv su dodatak: omogućuju vam stvaranje slike svih četiriju obruba, a zatim CSS-u nalažu da primijeni sliku na granice. Evo nekoliko novih svojstava obruba koja dolaze s CSS3:

  • polumjer obruba, polumjer obruba-dna-desno, obrub-gornji-desni-desni, polumjer-granica-gornji-lijevi, polumjer-granica-dno-lijevi omogućavaju stvaranje zaobljenih obruba
  • border-image-source omogućuje vam određivanje datoteke izvora slike umjesto korištenja unaprijed definiranih stilova obruba
  • Sok od slike granice predstavlja unutarnje odstupanja od rubova slike obruba
  • border-image-width definira vrijednost širine za vašu sliku obruba
  • border-image-outset određuje količinu izvan okvira obruba na koji se slika proteže
  • border-image-stretch definira popločavanje ili skaliranje srednjeg i bočnog dijela obruba

Zaključak - CSS3 vs CSS

Naučit ćete puno više o CSS3 kako više kodirate. Ali postoji jedna upozorenje: ne možete savladati CSS3 ako ne znate CSS. Učenje CSS3 uključuje nadogradnju na vašem razumijevanju i iskustvu s CSS-om. Ako ne znate CSS, morate ga naučiti s vrha zajedno s CSS3. Dobra stvar je da ako niste upoznati sa CSS-om, trebalo bi biti lakše udruživati ​​CSS3 i CSS učenje zajedno, kako bi bilo lakše i brže.

Preporučeni članci

Evo nekoliko članaka koji će vam pomoći da saznate više detalja o CSS3 u odnosu na CSS pa samo prođite vezu.

  1. CSS vs HTML
  2. Uzbudljivo znati CSS Flexbox Essentials za početnike
  3. HTML5 vs JavaScript najbolja stvar za naučiti
  4. CSS vs CSS3: razlike

Kategorija:

Razvoj softvera