CSS3 vs CSS - Cascading Style Sheets ali CSS je ključni element spletnega oblikovanja. Kot spletni razvijalec ali oblikovalec morate dobro razumeti CSS, še posebej razliko med CSS3 in CSS.

Morda ste slišali ali naleteli na izraz CSS3, če ste prebrali o spletnem razvoju ali spletnem oblikovanju. Če ste kdaj pomislili, kaj bi lahko bilo med CSS3 in CSS, bi se lahko vsi vaši dvomi spočili: Oba sta enaka.

Tako je: CSS3 proti CSS sta si med seboj drugačna kot HTML in HTML5. CSS3 je preprosto zadnja iteracija CSS-ja. Ljudje, ki trenutno govorijo o kodiranju CSS, se pravzaprav samo sklicujejo na CSS3.

Tako HTML5 kot CSS3 sta na splošno postala jezikovni besedi, katerih pomeni presegajo njihove dejanske tehnologije. Simbolizirajo spoštovanje določenih temeljnih standardov pri spletnem razvoju namesto uporabe lastniške programske opreme. Večinoma je hrup okoli teh buzzwordov že zamrl. Večina podjetij, tudi tista, ki prisegajo, da bodo vse držala pri sebi, bi se strinjala, da spoštovanje teh temeljnih standardov vsem ljudem olajša življenje.

Zdaj je minilo precej časa, odkar so CSS3 začeli in sprejemali vsi in vsi. Industriji je prineslo veliko odličnih stvari in pomenilo velik korak naprej za razvoj spleta na splošno. Prejšnja različica, CSS2, je bila predstavljena že leta 1998. To je bilo pred skoraj 20 leti. Edina revizija, ki jo je prejel po uvedbi leta 2011, je bila imenovana CSS2.1. Že z revizijo je večina strokovnjakov že začela pripovedovati, da je CSS3 neizogiben. CSS3 je imel številne funkcije in zmogljivosti, ki so do takrat postale povsem potrebne.

Morda niste vedeli o CSS3, da se je začel razvijati le leto po predložitvi prejšnje različice. To pomeni, da je W3C na izboljšani različici delal od leta 1999. Za izdajo prve stabilne različice CSS3 je bilo potrebnih več kot 12 let.

Med CSS3 in CSS obstajajo velike razlike (do katerih bomo kmalu prišli). A dejstvo je, da so spletni brskalniki že bili pripravljeni na dodatke v CSS3 do trenutka, ko se je objavil. Kot rezultat, so se hitro prilagodili novi izdaji. Vsak večji spletni brskalnik zdaj podpira CSS3, tudi Internet Explorer!

Seveda W3C še vedno razvija CSS3 in HTML5, zato končna različica ni verjetna. Če smo pošteni, končna različica v tem trenutku tudi ni nujna, saj hitro napreduje internet. Ker potrebe po spletu in sama industrija raste in se spreminjajo tako hitro, se mora kodiranje premakniti tako hitro, če ne več.

CSS3 vs CSS Infographics

Določene razlike v CSS3 in CSS

Zdaj, ko veste nekaj o ozadju za CSS3, si poglejmo podrobneje, kaj se je spremenilo. Morda je največja razlika med CSS3 in prejšnjo izdajo, ki jo je zamenjal, ločitev modula. V CSS2 je bila vse ena sama velika specifikacija, ki je določala različne lastnosti. Vendar je CSS3 to spremenil tako, da je vnesel več dokumentov, imenovanih moduli. Vsak modul ima svoje nove zmogljivosti, ki ne vplivajo na združljivost prejšnje stabilne izdaje CSS.

Poizvedbe v medijih

Na voljo je veliko modulov, vendar so W3C kot uradna priporočila objavljeni le štirje moduli. Ti štirje moduli so naslednji:

  1. Barva, objavljeno 2011
  2. Izbirniki 3. stopnje, objavljeno 2011
  3. Imenski prostori, objavljeno 201
  4. Medijske poizvedbe, objavljeno 2012

Med njimi je najpomembnejši modul Media poizvedbe. Pravzaprav bi lahko bil ta modul najpomembnejši dodatek, ki ga je CSS3 na splošno prinesel CSS. Poizvedbe v medijih so nekaj preprostega: omogoča uporabo določenih pogojev na različnih slogih. To omogoča spletnim mestom, da so tekoče ali "odzivne" na različne velikosti zaslona. Z drugimi besedami, spletna mesta lahko prilagodijo svoje dimenzije in elemente, da ustrezajo različnim napravam. Danes je odzivno spletno oblikovanje verjetno največja glasba. Glede na to, da je večina interneta zdaj uporabljena na mobilnih napravah, je odziven dizajn nujno potreben in medijske poizvedbe pripomorejo k temu. Modul tudi razvijalcem omogoča, da spletna mesta prilagodijo različnim ločljivostm, ne da bi spremenili ali odstranili vsebino.

Medijske poizvedbe je tudi precej enostavno ugotoviti in dodati. Ko jih uporabite nekajkrat, lahko precej ugotovite ostalo. Tu je nekaj primerov vrstic kode:

zaslon @media in (največja širina: 600 pik) (

ozadje: #FFF;

)

Zdi se dovolj preprosto, kajne? S temi nekaj vrsticami kode lahko omogočite oblikovanje zaslonov z največ 600 pikami širine. To pomeni, da bodo vsi zasloni z največjo 600 slikovnih pik prikazali belo ozadje. Največja širina je le eden od več pogojev, ki jih lahko uporabite za tabelo sloga na CSS3. Druga je največja širina naprave. To je ločljivost zaslona in ne območje gledanja. Prav tako se lahko namesto najvišje navede minimalna vrednost; samo uporabite 'min' namesto 'max'. Lahko tudi kombinirate dve, kot je spodaj:

@media zaslon in (najmanjša širina: 600 pik) in (največja širina: 900 pik) (

ozadje: #FFF;

)

Tukaj stajling velja samo za zaslone s širino gledanja 600-900 slikovnih pik. CSS3 ima nekaj vnaprej določenih tabel za sloge za priljubljene mobilne naprave, kot sta Apple iPad in iPhone. Tu je nekaj takih:

Do zdaj bi moralo biti že povsem jasno, kako pomembne so medijske poizvedbe. Ta modul je zelo priročen za razvijalce, ki želijo ustvariti odziven spletni dizajn z čim manjšo količino kodiranja.

Zaokrožene meje

CSS3 ima tudi nekaj resnično pomembnih pomislekov glede spletnega oblikovanja. Na primer, obrobe se lahko zaokrožijo brez kramp, pri čemer CSS3 uvede zaobljene obrobe. To je bil velik plus za spletne razvijalce in oblikovalce, ki so se že prej spopadali z mejami CSS. Ni presenetljivo, da nekatere od teh funkcij še vedno ne delujejo v starih različicah Internet Explorerja. Edina dodatna koda, ki jo morate dodati v določen razred znotraj slogovnega lista, je na primer:

-moz-meja-polmer: 5px;

-webkit-meja-polmer: 5px;

obroba: 2px trdna # 897048;

CSS3 tako spletnemu razvijalcu in oblikovalcu olajša življenje. Izdanje je prišlo tudi z gradienti, ki je bil presenetljivo nedosegljiv v prejšnjih izdajah.

Priporočeni tečaji

  • Spletno usposabljanje o spletnih storitvah na Javi
  • Profesionalni razvoj iger v C ++ Training
  • Program etičnega hekerstva
  • Vegas Pro 13 vadbeni paket

Mejne slike, besedilne sence

Drugi elementi, ki so bili dodani s CSS3, vendar v prejšnjih različicah manjkajo, so vključevali slike obrobe in polja / besedilne sence. CSS3 je stvari precej poenostavil, saj je odpravil potrebo po krajih za kateri koli od zgoraj naštetih elementov. Tu je na primer samotna vrstica kode, ki jo želite dodati za besedilne sence:

senca besedila: 2px 2px 2px # ddccb5;

Stolpci

CSS3 je poenostavil tudi dodajanje stolpcev v vsebino. Vse kar morate zdaj storiti je, da dodate štiri vrstice kode:

  1. štetje stolpcev
  2. širina stolpca
  3. vrzel v stolpcu
  4. pravilo stolpca

Več ozadij

Najnovejša različica CSS je dodala tudi možnost neposrednega zastavljanja več ozadij iz CSS, namesto da bi uporabila krožne krame kot prej. Koda je neverjetno enostavna za zapomniti in zapisati, poleg tega pa je zelo pomembna za ustvarjanje sodobnih elementov spletnega oblikovanja. Tu je primer:

.multiplebackgrounds (

višina: 100px;

širina: 200px;

oblazinjenje: 20px;

ozadje: url (top.gif) zgoraj desno, brez ponovitve,

url (spodaj.gif) zgoraj levo ponovite-y,

url (srednja.gif) spodnja ponovitev-z;

)

Predponi prodajalcev

Prodajne predpone so bile pogosto uporabljene v času, ko je CSS3 pravkar izšel. Brskalnikom so pomagali razlagati kodo CSS. Uporabljajo se do danes, če vaš spletni brskalnik ne more prebrati kode. Tu so predstavitvene predpone za glavne brskalnike:

  • -moz- : Firefox
  • -webkit- : brskalniki spletnih strani, kot sta Apple Safari in Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Predpona Opera je postala tudi odveč, saj je podjetje s svojega mehanizma za upodabljanje Presto preklopilo mobilni in namizni brskalnik na platformo Webkit. Čeprav se prodajna predpona do neke mere še vedno uporablja, je na tej točki večinoma izginil.

Dodani psevdorazredi

Z dodatkom CSS3 smo dobili tudi veliko dodatnih psevdorazredov, vključno s strukturnimi za ciljne elemente glede na njihov položaj dokumenta in odnos do drugih različnih elementov. Tu je nekaj takih:

  • : root cilja korenski element dokumenta
  • : niso (-i) ciljni elementi, ki jih izbirniki, navedeni v (-ih), ne ustrezajo
  • : prvi otrok cilja prvega otroka v zabojniku ne glede na vrsto predmeta
  • : prva vrsta cilja prvo določeno vrsto elementa v nadrejenem
  • : nth-otrok (n) uporablja numerične vrednosti znotraj (n) za ciljanje na elemente otrok glede na njihov položaj v staršu. To lahko na primer uporabite za dodajanje alternativnih barv ozadja v komentarje spletnega dnevnika
  • : prazni ciljni elementi, ki nimajo besedila ali otrok, kot prazni elementi, kot je
  • : Only-child cilja elemente v drevesu dokumentov, ki je edini podrejeni element v nadrejenem

Novi izbirniki CSS3

CSS3 ponuja več načinov za zapisovanje pravil CSS prek novih izbirnikov, novih kombinacijskih in psevdoelementov: tu so trije novi izbirniki atributov:

  • Za natančno ujemanje element (foo = ”bar”)
  • Za ujemanje elementa z atributom, imenovanim foo, ki se začne z 'bar', element (foo $ = "bar")
  • Za ujemanje elementa z atributom, imenovanim foo, ki se konča z 'bar', element (foo * = ”vrstica”)

CSS3 ima več novih psevdorazredov, o katerih smo že govorili zgoraj. Tukaj je še nekaj:

  • : nth-last-otrok (n) ustreza natančnim otroškim elementom iz zadnjega
  • : nth-of-type (n) se ujema z elementi sorojenca z istim imenom pred njimi v drevesu dokumentov
  • : nth-last-of-type (n) ustreza elementom sorojenca z istim imenom od spodaj
  • : zadnja vrsta cilja ciljno zadnjo vrsto elementa znotraj nadrejenega
  • : samo tip vrste cilja element, katerega edini tip je
  • : ciljni ciljni elementi, na katere cilja ciljni URI
  • : omogočeno ustreza elementu, ko je omogočen
  • : invalid ustreza elementu, ko je onemogočen
  • : označeno cilja element, ko se preveri s potrditvenim poljem ali izbirnim gumbom

Nov kombiniralec

CSS3 ima tudi popolnoma nov kombinator: elementA ~ elementB

Ta novi kombinator se ujema, ko elementA sledi elementB nekje zatem, ne pa takoj zatem.

Nove lastnosti stila polja

CSS3 ima enak model škatle kot prejšnjo izdajo, vendar z nekaterimi novimi lastnostmi sloga, ki vam pomagajo oblikovati obrobe in ozadja škatel. Nove lastnosti ozadja v CSS3 so:

  • posnetek ozadja

Ta lastnost se uporablja za določanje, kako se izreže slika ozadja. Privzete dimenzije izrezka so obrobno polje, vendar ga lahko spremenite v polje z vsebino ali oblazinjenje.

  • ozadje

Ta posebna lastnost se uporablja za določitev, ali je treba ozadje postaviti v mejni okvir, polje z vsebino ali oblazinjenje.

  • velikost ozadja

Ta lastnost omogoča razvijalcu, da navede velikost slike ozadja in raztegne manjše slike za prilagajanje strani.

CSS3 je spremenil tudi nekatere obstoječe lastnosti sloga ozadja. Tukaj je pregled sprememb:

  • ozadje-ponovite

Ta lastnost ima zdaj dve novi vrednosti: krog in presledek. Okroglo spremenite velikost slike, da jo nekajkrat položite v škatlo. Prostor enakomerno razporedi ploščico sliko v polje brez striženja.

  • pritrditev ozadja

Lastnost št. Ne vključuje vrednosti "lokalne", tako da se ozadje pomika z vsebino elementa, če ima element drsno vrstico.

Nove mejne lastnosti

CSS3 omogoča, da se meje oblikujejo kot dvojne, trdne, črtkane ali celo kot slike. Slike obrobe so zanimiv dodatek: omogočajo vam, da ustvarite sliko vseh štirih robov in nato CSS-u rečejo, naj sliko nanese na meje. Tu je nekaj novih lastnosti obrob, ki so priložene CSS3:

  • robnik, robnik, polmer meje od spodaj, desno, meja, polmer, zgornji desni, rob, meja, zgornji levi polmer, meja, polmer od spodaj-levi, omogoča ustvarjanje zaobljenih robov
  • border-image-source vam omogoča, da določite datoteko vira slike, namesto da uporabite vnaprej določene sloge robov
  • rezina slike-meja predstavlja odmike navznoter od robov slik obrob
  • border-image-width določa vrednost širine vaše slike obrobe
  • border-image -setset določa znesek, ki presega mejno polje, na katero se slika razširi
  • border-image-stretch definira polaganje ali spreminjanje srednjega in stranskega dela obrobne slike

Zaključek - CSS3 proti CSS

Več o CSS3 boste izvedeli, ko boste več kodirali. Vendar obstaja ena opozorila: CSS3 ne morete obvladati, če ne poznate CSS. Učenje CSS3 vključuje nadgradnjo vašega razumevanja in izkušenj s CSS. Če CSS ne poznate, se ga morate naučiti od zgoraj, skupaj s CSS3. Dobra stvar je, da če CSS3 ne poznate CSS3, bi morali lažje in hitreje združiti učenje CSS3 proti CSS.

Priporočeni članki

Tukaj je nekaj člankov, ki vam bodo pomagali do podrobnosti o CSS3 v primerjavi s CSS, zato pojdite po povezavi.

  1. CSS vs HTML
  2. Navdušujoče znanje CSS Flexbox Essentials za začetnike
  3. HTML5 vs JavaScript Najboljša stvar, ki se jo morate naučiti
  4. CSS vs CSS3: razlike

Kategorija:

Razvoj programske opreme