CSS3 vs CSS - Cascading Style Sheets eller CSS er et sentralt element i webdesign. Som nettutvikler eller designer må du ha en skarp forståelse av CSS, spesielt forskjellen mellom CSS3 vs CSS.

Du har kanskje hørt eller kommet over begrepet CSS3 hvis du har lest opp om nettutvikling eller webdesign. Hvis du noen gang har tenkt hva det forskjellige kan være mellom CSS3 vs CSS, her er hvor all tvil vil bli lagt til ro: De er begge de samme.

Det er riktig: CSS3 vs CSS er like forskjellige fra hverandre som HTML og HTML5. CSS3 er ganske enkelt den siste iterasjonen av CSS. Folk som snakker om koding av CSS akkurat nå, refererer faktisk bare til CSS3.

Både HTML5 og CSS3 har generelt blitt buzzwords, med betydninger utover deres faktiske teknologier. De symboliserer overholdelse av visse kjernestandarder i webutvikling i stedet for å bruke proprietær programvare. For det meste har hypen rundt disse buzzwords allerede døde. De fleste selskaper, også de som sverger ved å holde alt hjemme, vil være enige om at å holde seg til disse kjernestandardene gjør livet mye enklere for alle.

Nå er det en god stund siden CSS3 har blitt lansert og akseptert av en og alle. Det brakte mange flotte ting til industrien og markerte et ganske stort skritt fremover for webutvikling generelt. Den forrige versjonen, CSS2, ble lansert helt tilbake i 1998. Det var nesten 20 år siden. Den eneste revisjonen den fikk etter lanseringen var i 2011, kalt CSS2.1. Selv med revisjonen hadde de fleste eksperter allerede begynt å fortelle at CSS3 er uunngåelig. CSS3 kom med en rekke funksjoner og funksjoner som hadde blitt helt nødvendige da.

Det du kanskje ikke har visst om CSS3, er at den begynte utviklingen bare et år etter at den forrige versjonen ble sendt inn. Dette betyr at W3C jobbet med den forbedrede versjonen siden 1999. Det tok mer enn 12 år å lansere den første stabile versjonen av CSS3.

Det er enorme forskjeller mellom CSS3 vs CSS (som vi snart kommer til). Men faktum er at nettlesere allerede var klare for tillegg til CSS3 da den ga ut. Som et resultat tilpasset de seg ganske raskt til den nye utgivelsen. Hver større nettleser støtter nå CSS3, til og med Internet Explorer!

Selvfølgelig fortsetter W3C fortsatt å utvikle CSS3 og HTML5, så en endelig versjon er usannsynlig. For å være rettferdig er en endelig versjon heller ikke en nødvendighet for øyeblikket, gitt hvor raskt internett utvikler seg. Når nettkrav og industrien i seg selv vokser og endrer seg så raskt, må kodingen komme videre like raskt, om ikke mer.

CSS3 vs CSS Infographics

CSS3 vs CSS Differenser definert

Nå som du vet litt om bakgrunnen bak CSS3, la oss se nærmere på hva det endret seg. Den kanskje største forskjellen mellom CSS3 og den forrige utgivelsen som den erstattet er modul-separasjonen. I CSS2 var alt en stor spesifikasjon som definerte forskjellige funksjoner. CSS3 endret imidlertid dette ved å hente inn flere dokumenter kalt moduler. Hver modul har sine egne nye funksjoner som ikke påvirker kompatibiliteten til den forrige stabile CSS-utgivelsen.

Mediesøk

Det er mange moduler tilgjengelig, men bare fire er publisert som formelle anbefalinger fra W3C. Disse fire store modulene er som følger:

  1. Color, publisert 2011
  2. Selectors Level 3, publisert 2011
  3. Navnearealer, publisert 201
  4. Mediesøk, publisert 2012

Blant disse er den viktigste modulen forespørsler om medier. Faktisk kan denne modulen uten tvil være det viktigste tilskuddet som CSS3 brakte til CSS generelt. Mediaspørsmål er noen ganske enkle: det muliggjør anvendelse av visse betingelser på forskjellige stilark. Dette gjør at nettsteder kan være flytende eller 'responsive' til forskjellige skjermstørrelser. Nettsteder kan med andre ord justere dimensjoner og elementer slik at de passer til forskjellige enheter. I dag er responsiv nettdesign trolig det største buzzword. Gitt at et flertall av internettbruken nå foregår på mobile enheter, er responsiv design helt essensielt, og mediesøknader er med på å oppnå dette. Modulen gjør det også mulig for utviklere å skreddersy nettsteder til forskjellige oppløsninger uten å endre eller fjerne innhold.

Mediesøk er også ganske enkle å finne ut og legge til. Når du har brukt dem noen ganger, kan du ganske mye finne ut av resten. Her er noen eksempler med kodelinjer:

@media-skjerm og (maks. bredde: 600 piksler) (

bakgrunn: #FFF;

)

Virker enkelt nok, ikke sant? Med disse par kodelinjene kan du aktivere styling for skjermer med maksimalt 600 piksler bredde. Dette betyr at alle skjermer med maksimal bredde på 600 piksler vil ha hvit bakgrunn. Maksimal bredde er bare en av flere forhold du kan bruke på et stilark på CSS3. En annen er bredden på maks. Enhet. Dette er skjermoppløsningen og ikke visningsområdet. Dessuten kan en minimumsverdi angis i stedet for maksimum; bare bruk 'min' i stedet for 'maks'. Du kan også kombinere de to, som nedenfor:

@media-skjerm og (min. bredde: 600 piksler) og (maks. bredde: 900 piksler) (

bakgrunn: #FFF;

)

Her gjelder stylingen bare for skjermer med en visningsbredde på 600-900 piksler. CSS3 kommer med noen forhåndsdefinerte stilark for populære mobile enheter, som Apple iPad og iPhone. Her er noen av dem:

Det burde være ganske klart nå hvor viktige mediespørsmål er. Denne modulen er veldig nyttig for utviklere som ønsker å lage responsiv webdesign med minst mulig koding.

Avrundede grenser

CSS3 kommer også med noen viktige hensyn til webdesign. I noen tilfeller kan grensene avrundes uten hacks med CSS3 som introduserer avrundede grenser. Dette var et stort pluss for nettutviklere og designere som slet med CSS-grenser før. Ikke overraskende fungerer noen av disse funksjonene fremdeles ikke i gamle versjoner av Internet Explorer. Den eneste tilleggskoden du trenger å legge til den spesifikke klassen i stilarket er for eksempel:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

kant: 2px solid # 897048;

Dermed gjør CSS3 livet mye enklere for nettutvikleren og designeren. Utgivelsen kom også med gradienter, noe som overraskende var utilgjengelig i tidligere utgivelser.

Anbefalte kurs

  • Online opplæring på webtjenester i Java
  • Profesjonell spillutvikling i C ++ -trening
  • Etisk hackingsprogram
  • Vegas Pro 13 Training Bundle

Kantbilder, tekstskygger

Andre elementer som ble lagt til med CSS3, men som manglet i tidligere versjoner, inkluderte kantlinjebilder og boks / tekstskygger. CSS3 gjorde ting mye enklere, og fjernet behovet for å legge til hacks for noen av de ovennevnte vanlige stylingelementene. Her er for eksempel den ensomme linjen med kode som du vil legge til for tekstskygger:

tekstskygge: 2px 2px 2px # ddccb5;

kolonner

CSS3 forenklet også hvordan du legger kolonner til innhold. Alt du trenger å gjøre nå er å legge til fire linjer med kode:

  1. kolonne-count
  2. kolonnebredde
  3. kolonne-gap
  4. kolonne-regelen

Flere bakgrunner

Den siste CSS-utgivelsen har også lagt til muligheten til å direkte innsiden av flere bakgrunner fra CSS i stedet for å bruke rundkjøringshakk som før. Koden er utrolig enkel å huske og skrive, og er også super viktig for å lage moderne webdesignelementer. Her er et eksempel:

.multiplebackgrounds (

høyde: 100px;

bredde: 200px;

polstring: 20px;

bakgrunn: url (top.gif) ingen-repetisjon øverst til høyre,

url (bottom.gif) gjenta øverst til venstre,

url (middle.gif) nederste gjentagelse-z;

)

Leverandørforstavelser

Forhandlerprefikser ble ofte brukt i løpet av tiden da CSS3 nettopp hadde utgitt. De hjalp nettlesere med å tolke CSS-kode. De er vant til i dag, i tilfelle nettleseren din ikke kan lese koden. Her er leverandørprefikser for store nettlesere:

  • -moz- : Firefox
  • -webkit- : Webkit-nettlesere som Apple Safari og Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Operas prefiks er også blitt overflødig siden selskapet byttet mobil- og stasjonær nettleser til Webkit-plattformen fra Presto-gjengivelsesmotoren. Selv om leverandørprefikset fortsatt brukes til en viss grad, har det for det meste forsvunnet på dette tidspunktet.

Lagt til pseudoklasser

Med tillegg av CSS3, fikk vi også mange ekstra pseudoklasser, inkludert strukturelle klasser for målretting av elementer basert på deres dokumentposisjon og forhold til andre forskjellige elementer. Her er noen av dem:

  • : rot er rettet mot dokumentets rotelement
  • : ikke (r) er målrettet mot elementer som ikke stemmer overens med velgerne spesifisert i (r)
  • : førstebarn retter seg mot det første barnet i en container uavhengig av type element
  • : første av typen målretter mot den første spesifiserte elementtypen i en overordnet
  • : nth-child (n) bruker numeriske verdier innenfor (n) for å målrette barnelementer med hensyn til deres plassering i forelderen. For eksempel kan du bruke dette til å legge til vekslende bakgrunnsfarger i bloggkommentarer
  • : tomme mål elementer som ikke har tekst eller barn, som tomme elementer som
  • : eneste barn retter seg mot elementer i et dokumenttre som er det eneste barnelementet i foreldrene

Nye CSS3-velgere

CSS3 tilbyr en rekke måter å skrive opp CSS-regler gjennom de nye velgerne, et nytt kombinasjons- og pseudo-element: her er de tre nye attributtvelgerne:

  • For eksakte treff, element (foo = "bar")
  • For å matche et element med et attributt kalt foo som begynner med 'bar', element (foo $ = "bar")
  • For å matche et element med et attributt som heter foo som slutter med 'bar', element (foo * = ”bar”)

CSS3 kommer med flere nye pseudoklasser, hvorav noen har blitt diskutert over. Her er noen flere:

  • : nth-last-child (n) samsvarer med de eksakte barnelementene fra det siste
  • : nth-of-type (n) samsvarer med søskenelementer med samme navn foran seg i dokumenttreet
  • : nth-last-of-type (n) samsvarer med søskenelementer som har samme navn fra bunnen
  • : siste type målretter den sist spesifiserte typen element i en overordnet
  • : bare-av-typen er rettet mot elementet som den er den eneste typen av
  • : målmålelementer som er målrettet av den henvisende URI
  • : aktivert samsvarer med elementet når det er aktivert
  • : deaktivert samsvarer med elementet når det er deaktivert
  • : merket retter seg mot elementet når det er avkrysset gjennom en avmerkingsboks eller alternativknapp

En ny kombinator

CSS3 kommer også med en helt ny kombinator: elementA ~ elementB

Denne nye kombinatoren samsvarer med når elementA følges et sted etterpå av elementB, men ikke umiddelbart etterpå.

Ny boksstilegenskaper

CSS3 har samme boksmodell som forrige utgivelse, men med noen nye stilegenskaper som hjelper deg med å style grenser og bakgrunner på boksene dine. De nye bakgrunnsegenskapene i CSS3 er:

  • bakgrunn klype

Denne egenskapen brukes til å definere hvordan du skal klippe et bakgrunnsbilde. Standard utklippsdimensjoner er rammeboksen, men du kan endre den til innholdsboksen eller polstringboksen.

  • background-opprinnelse

Denne spesielle egenskapen brukes til å bestemme om bakgrunnen skal legges i grenseboksen, innholdsboksen eller polstringboksen.

  • background-size

Denne egenskapen gjør det mulig for utvikleren å indikere bakgrunnsstørrelsen og strekke mindre bilder for montering av siden.

CSS3 endret også opp noen av de eksisterende bakgrunnsegenskapene. Her er en titt på endringene:

  • background-repeat

Denne egenskapen har nå to nye verdier: runde og plass. Runde omskalerer bildet for å flislegge det flere ganger i en boks. Space plasserer det flislagte bildet jevnt i esken uten å klippe ut.

  • Bakgrunnen-feste

Egenskapen nr inkluderer en 'lokal' verdi slik at bakgrunnen ruller med elementinnholdet i tilfelle elementet har en rullefelt.

Nye grenseiendommer

CSS3 gjør det mulig å utforme grenser som dobbelt, solid, stiplet eller til og med som et bilde. Kantbilder er et interessant tillegg: de lar deg lage et bilde av alle de fire grensene og deretter be CSS om å bruke bildet på grensene. Her er noen av de nye grenseegenskapene som følger med CSS3:

  • border-radius, border-bottom-right-radius, border-top-right-radius, border-top-left-radius, border-bottom-left-radius lar deg lage avrundede grenser
  • border-image-source lar deg spesifisere en bildekildefil i stedet for å bruke forhåndsdefinerte kantlinestiler
  • border-image-skive representerer innvendige forskyvninger fra kantene på kantbildene
  • border-image-bredden definerer breddeverdien for kantbildet
  • border-image-outset spesifiserer beløpet utover grenseboksen som bildet strekker seg til
  • border-image-stretch definerer flislegging eller skalering av midt- og sidedeler av kantlinjebildet

Konklusjon - CSS3 vs CSS

Du vil lære mye mer om CSS3 når du koder mer. Men det er ett forbehold: du kan ikke mestre CSS3 med mindre du kjenner CSS. Å lære CSS3 innebærer å bygge videre på din forståelse og erfaring med CSS. Hvis du ikke kjenner CSS, må du lære det fra toppen sammen med CSS3. Det gode er at hvis du ikke er kjent med CSS, skal det være lettere å klubbe både CSS3 vs CSS-læring sammen for å gjøre det enklere og raskere.

Anbefalte artikler

Her er noen artikler som vil hjelpe deg å få mer detaljert informasjon om CSS3 vs CSS, så bare gå gjennom lenken.

  1. CSS vs HTML
  2. Spennende å kjenne til CSS Flexbox Essentials for nybegynnere
  3. HTML5 vs JavaScript beste ting å lære
  4. CSS vs CSS3: Forskjeller

Kategori:

Programvare utvikling