CSS3 vs CSS - Cascading Style Sheets eller CSS er et nøgleelement i webdesign. Som webudvikler eller designer skal du have en dybt forståelse af CSS, især forskellen mellem CSS3 vs CSS.

Du har muligvis hørt eller fundet udtrykket CSS3, hvis du har læst op om webudvikling eller webdesign. Hvis du nogensinde har tænkt over, hvad det forskellige kunne være mellem CSS3 vs CSS, her er hvor alle dine tvivl vil blive lagt til hvile: De er begge de samme.

Det er rigtigt: CSS3 vs CSS er lige så forskellige fra hinanden som HTML og HTML5. CSS3 er simpelthen den seneste iteration af CSS. Folk, der taler om kodning af CSS lige nu, henviser faktisk bare til CSS3.

Både HTML5 og CSS3 er generelt blevet buzzwords med betydninger ud over deres faktiske teknologier. De symboliserer overholdelse af visse kernestandarder i webudvikling i stedet for at bruge proprietær software. For det meste er hypen omkring disse buzzwords allerede døde. De fleste virksomheder, også dem, der sværger ved at holde alt internt, ville være enige om, at det at holde sig til disse kernestandarder gør livet meget lettere for alle.

Nu er det lidt tid, siden CSS3 er lanceret og accepteret af en og alle. Det bragte en masse gode ting til branchen og markerede et ganske stort skridt fremad for webudvikling generelt. Den forrige version, CSS2, blev lanceret helt tilbage i 1998. Det var næsten 20 år siden. Den eneste revision, den modtog efter lanceringen, var i 2011, kaldet CSS2.1. Selv med revisionen var de fleste eksperter allerede begyndt at fortælle, at CSS3 er uundgåelig. CSS3 kom med en række funktioner og funktioner, der var blevet helt nødvendige på det tidspunkt.

Hvad du måske ikke har vidst om CSS3 er, at det begyndte udvikling kun et år efter, at dens forrige version blev sendt. Dette betyder, at W3C arbejdede på den forbedrede version siden 1999. Det tog mere end 12 år at frigive den første stabile version af CSS3.

Der er enorme forskelle mellem CSS3 vs CSS (som vi snart kommer til). Men faktum er, at webbrowsere allerede var klar til tilføjelser til CSS3, da det udkom. Som et resultat tilpassede de sig ret hurtigt til den nye udgivelse. Hver større webbrowser understøtter nu CSS3, endda Internet Explorer!

Naturligvis fortsætter W3C stadig med at udvikle CSS3 og HTML5, så en endelig version er usandsynlig. For at være retfærdig er en endelig version heller ikke en nødvendighed i øjeblikket, i betragtning af hvor hurtigt internettet skrider frem. Idet webkravene og industrien i sig selv vokser og ændrer sig så hurtigt, er kodning nødt til at komme så hurtigt frem, hvis ikke mere.

CSS3 vs CSS Infographics

CSS3 vs CSS forskelle defineret

Nu hvor du ved lidt om baggrunden bag CSS3, lad os se nærmere på, hvad det ændrede sig. Den største forskel mellem CSS3 og den forrige udgivelse, som den erstattede, er måske modulens adskillelse. I CSS2 var alt en enkelt stor specifikation, der definerede forskellige funktioner. Dog ændrede CSS3 dette ved at indføre flere dokumenter kaldet moduler. Hvert modul har sine egne nye funktioner, der ikke påvirker kompatibiliteten af ​​den tidligere stabile CSS-udgivelse.

Mediespørgsmål

Der er mange tilgængelige moduler, men kun fire offentliggøres som formelle henstillinger fra W3C. Disse store fire moduler er som følger:

  1. Farve, offentliggjort 2011
  2. Selectors Level 3, offentliggjort 2011
  3. Navneområder, offentliggjort 201
  4. Mediespørgsmål, offentliggjort 2012

Blandt disse er det vigtigste modul Media-forespørgsler. Faktisk kunne dette modul uden tvivl være den vigtigste tilføjelse, som CSS3 bragte til CSS generelt. Medieforespørgsler gør nogle temmelig enkle: det muliggør anvendelse af visse betingelser på forskellige stilark. Dette gør det muligt for websteder at være flydende eller 'lydhøre' på forskellige skærmstørrelser. Med andre ord kan websteder justere deres dimensioner og elementer, så de passer til forskellige enheder. I dag er responsivt webdesign sandsynligvis det største buzzword. I betragtning af at et flertal af internetforbruget nu foregår på mobile enheder, er responsivt design absolut vigtigt, og medieforespørgsler hjælper med at opnå dette. Modulet giver også udviklere mulighed for at skræddersy websteder til forskellige opløsninger uden at ændre eller fjerne indhold.

Medieforespørgsler er også ret nemme at finde ud af og tilføje. Når du først har brugt dem et par gange, kan du stort set finde ud af resten. Her er nogle eksempler med kodelinjer:

@media-skærm og (maks. bredde: 600 px) (

baggrund: #FFF;

)

Synes det er enkelt nok, ikke? Med disse par kodelinjer kan du aktivere styling til skærme med en maksimal bredde på 600 pixels. Dette betyder, at alle skærme med en bredde på maksimalt 600 pixels viser en hvid baggrund. Den maksimale bredde er kun en af ​​de flere betingelser, du kan anvende på et typografiark på CSS3. En anden er max-enhedsbredde. Dette er skærmopløsningen og ikke visningsområdet. Der kan også angives en minimumsværdi i stedet for maksimum; bare brug 'min' i stedet for 'max'. Du kan også kombinere de to, som nedenfor:

@media-skærm og (min. bredde: 600 px) og (maks. bredde: 900 px) (

baggrund: #FFF;

)

Her gælder stylingen kun for skærme med en visningsbredde på 600-900 pixels. CSS3 leveres med nogle foruddefinerede stilark til populære mobile enheder som Apple iPad og iPhone. Her er nogle af dem:

Det skal nu være temmelig klart, hvor vigtige medieforespørgsler er. Dette modul er meget praktisk for udviklere, der ønsker at oprette responsivt webdesign med mindst mulig kodning.

Rundede grænser

CSS3 kommer også med nogle virkelig vigtige overvejelser til webdesign. I nogle tilfælde kan grænserne afrundes uden hacks med CSS3, der indfører afrundede rammer. Dette var et stort plus for webudviklere og designere, der før kæmpede med CSS-grænser. Ikke overraskende fungerer nogle af disse funktioner stadig ikke i gamle versioner af Internet Explorer. Den eneste ekstra kode, du har brug for at tilføje til den specifikke klasse inden for typografien, er for eksempel:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

kant: 2px solid # 897048;

Således gør CSS3 livet meget lettere for webudvikleren og designeren. Udgivelsen kom også med gradienter, som overraskende var utilgængelige i tidligere udgivelser.

Anbefalede kurser

  • Onlineuddannelse på webservices i Java
  • Professionel spiludvikling i C ++ træning
  • Etisk hacking-program
  • Vegas Pro 13 Training Bundle

Kantbilleder, tekstskygger

Andre elementer, der blev tilføjet med CSS3, men mangler i tidligere versioner inkluderede kantbilleder og boks / tekstskygger. CSS3 gjorde tingene meget enklere og fjernede behovet for at tilføje hacks til et af de ovennævnte almindelige stylingelementer. F.eks. Her er den ensomme linje med kode, der skal tilføjes til tekstskygger:

tekstskygge: 2px 2px 2px # ddccb5;

Kolonner

CSS3 forenklet også, hvordan man tilføjer kolonner til indholdet. Alt hvad du skal gøre nu er at tilføje fire kodelinjer:

  1. kolonne-count
  2. kolonne bredde
  3. kolonne-kløften
  4. kolonne-reglen

Flere baggrunde

Den seneste CSS-udgivelse tilføjede også muligheden for direkte at indse flere baggrunde fra CSS snarere end at bruge rundkørselshacks som før. Koden er utroligt enkel at huske og skrive, og er også super vigtig til at skabe moderne webdesignelementer. Her er et eksempel:

.multiplebackgrounds (

højde: 100px;

bredde: 200px;

polstring: 20px;

baggrund: url (top.gif) øverst til højre uden gentagelse,

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

url (middle.gif) bund gentagelse-z;

)

Sælgerpræfikser

Sælgerpræfikser blev ofte brugt i det tidsrum, hvor CSS3 netop var frigivet. De hjalp browsere med at tolke CSS-kode. De bruges til i dag, hvis din webbrowser ikke er i stand til at læse koden. Her er leverandørpræfikser for større browsere:

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

Operas præfiks er også blevet overflødigt, da virksomheden skiftede sin mobile og desktop-browser til Webkit-platformen fra sin Presto-gengivelsesmotor. Selvom leverandørpræfikset fortsat bruges til en vis grad, er det for det meste forsvundet på dette tidspunkt.

Tilføjet pseudoklasser

Med tilføjelsen af ​​CSS3 fik vi også en masse yderligere pseudoklasser, herunder strukturelle klasser til målretning af elementer baseret på deres dokumentposition og forhold til andre forskellige elementer. Her er nogle af dem:

  • : root er rettet mod dokumentets rodelement
  • : ikke (r) er målrettet mod elementer, der ikke matches af de vælgere, der er specificeret i (r)
  • : førstebørn målretter mod det første barn i en container uanset varetype
  • : første-af-typen målretter mod den første specificerede type element i en overordnet
  • : nth-child (n) bruger numeriske værdier inden for (n) til at målrette børnelementer med hensyn til deres placering i forælderen. For eksempel kan du bruge dette til at tilføje skiftende baggrundsfarver til blogkommentarer
  • : tomme mål mod elementer, der ikke har tekst eller børn, som tomme elementer som
  • : eneste barn er rettet mod elementer i et dokumenttræ, der er det eneste underordnede element i forælderen

Nye CSS3-vælgere

CSS3 tilbyder en række måder at opskrive CSS-regler gennem de nye vælgere, en ny kombinerende og pseudo-elementer: her er de tre nye attributvælger:

  • For nøjagtige kampe, element (foo = ”bjælke”)
  • For at matche et element med en attribut kaldet foo der begynder med 'bar', element (foo $ = ”bar”)
  • For at matche et element med en attribut kaldet foo, der slutter med 'bar', element (foo * = ”bar”)

CSS3 kommer med flere nye pseudoklasser, hvoraf nogle er blevet diskuteret ovenfor. Her er nogle flere:

  • : nth-last-child (n) matcher de nøjagtige underordnede elementer fra det sidste
  • : nth-of-type (n) matcher søskendeelementer med samme navn foran dem i dokumenttræet
  • : nth-last-of-type (n) matcher søskenelementer med samme navn fra bunden
  • : sidst af typen er målrettet mod den sidst specificerede type element inden for en overordnet
  • : kun-af-typen er målrettet mod det element, som det er den eneste type
  • : målmålelementer, der er målrettet af den henvisende URI
  • : aktiveret matcher elementet, når det er aktiveret
  • : deaktiveret matcher elementet, når det er deaktiveret
  • : markeret er målrettet mod elementet, når det markeres gennem en afkrydsningsfelt eller radioknap

En ny kombinator

CSS3 leveres også med en splinterny kombination: elementA ~ elementB

Denne nye kombinator matcher, når elementA følges et sted bagefter af elementB, men ikke umiddelbart bagefter.

Egenskaber i ny boksstil

CSS3 har den samme kassemodel som den forrige udgivelse, men med nogle nye stilegenskaber, der hjælper dig med at style grænser og baggrunde for dine kasser. De nye baggrundsegenskaber i CSS3 er:

  • background-clip

Denne egenskab bruges til at definere, hvordan man klipper et baggrundsbillede. Standardklipdimensionerne er kantboksen, men du kan ændre den til indholdsboksen eller polstringskassen.

  • baggrund-oprindelse

Denne særlige egenskab bruges til at bestemme, om baggrunden skal placeres i kantboksen, indholdsboksen eller polstringskassen.

  • baggrund-størrelse

Denne egenskab gør det muligt for udvikleren at angive baggrundsbilledstørrelse og strække mindre billeder til montering af siden.

CSS3 ændrede også nogle af de eksisterende egenskaber for baggrundstil. Her er et kig på ændringerne:

  • background-repeat

Denne egenskab har nu to nye værdier: runde og plads. Runde omskalerer billedet til flisning af det flere gange i en boks. Mellemrum placeres det flisebelagte billede jævnt i kassen uden at klippe.

  • background-attachment

Egenskabets nr inkluderer en 'lokal' værdi, så baggrunden ruller med elementindholdet, hvis elementet har en rullebjælke.

Nye grænseegenskaber

CSS3 gør det muligt at udforme kanter som dobbelt, solidt, stiplet eller endda som et billede. Kantbilleder er en interessant tilføjelse: De giver dig mulighed for at oprette et billede af alle de fire rammer og derefter fortælle CSS at anvende billedet på grænserne. Her er et par af de nye grænseegenskaber, der leveres med CSS3:

  • grænse-radius, grænse-nederst til højre-radius, grænse-top-højre-radius, grænse-top-venstre-radius, grænse-nederst til venstre-radius giver dig mulighed for at oprette afrundede rammer
  • border-image-source giver dig mulighed for at specificere en billedekildefil i stedet for at bruge foruddefinerede kantformater
  • border-image-slice repræsenterer indvendige forskydninger fra kanterne af kantbillederne
  • border-image-bredde definerer breddeværdien for dit kantbillede
  • border-image-outset specificerer mængden ud over den rammeboks, som billedet strækker sig til
  • kantlinjebillede-strækning definerer flisebelægning eller skalering af midter- og sidedelene af kantbilledet

Konklusion - CSS3 vs CSS

Du lærer meget mere om CSS3, når du koder mere. Men der er én advarsel: Du kan ikke mestre CSS3, medmindre du kender CSS. At lære CSS3 involverer at bygge videre på din forståelse og erfaring med CSS. Hvis du ikke kender CSS, skal du lære det fra toppen sammen med CSS3. Den gode ting er, at hvis du ikke er bekendt med CSS, skal det være lettere at klubbe både CSS3 vs CSS-læring sammen for at gøre det lettere og hurtigere.

Anbefalede artikler

Her er nogle artikler, der hjælper dig med at få mere detaljeret information om CSS3 vs CSS, så bare gå gennem linket.

  1. CSS vs HTML
  2. Spændende at kende CSS Flexbox Essentials for begyndere
  3. HTML5 vs JavaScript bedste ting at lære
  4. CSS vs CSS3: Forskelle

Kategori:

Softwareudvikling