CSS3 vs CSS - Cascading Style Sheets eller CSS är ett viktigt inslag i webbdesign. Som webbutvecklare eller designer måste du ha en noggrann förståelse för CSS, särskilt skillnaden mellan CSS3 vs CSS.

Du kanske har hört talat om CSS3 om du har läst om webbutveckling eller webbdesign. Om du någonsin trodde vad det olika kan vara mellan CSS3 vs CSS, här är där alla dina tvivel kommer att läggas till vila: De är båda samma.

Det stämmer: CSS3 vs CSS skiljer sig lika från varandra som HTML och HTML5. CSS3 är helt enkelt den senaste iterationen av CSS. Människor som pratar om kodning av CSS just nu hänvisar bara till CSS3.

Både HTML5 och CSS3 har generellt blivit sökord med betydelse utöver deras faktiska teknik. De symboliserar efterlevnaden av vissa kärnstandarder i webbutveckling istället för att använda egen programvara. För det mesta har hypen kring dessa buzzwords redan dött. De flesta företag, även de som svär genom att hålla allt internt, skulle hålla med om att att hålla sig till dessa grundläggande standarder gör livet mycket lättare för alla.

Nu har det gått ett tag sedan CSS3 har lanserats och accepterats av en och alla. Det förde många bra saker till branschen och markerade ett ganska stort steg framåt för webbutveckling i allmänhet. Den föregående versionen, CSS2, lanserades hela vägen tillbaka 1998. Det var nästan 20 år sedan. Den enda revisionen den fick efter lanseringen var 2011, kallad CSS2.1. Även med översynen hade de flesta experter redan börjat säga att CSS3 är oundvikligt. CSS3 kom med ett antal funktioner och funktioner som hade blivit helt nödvändiga då.

Vad du kanske inte har känt till CSS3 är att det började utvecklas bara ett år efter att dess tidigare version skickades in. Detta innebär att W3C arbetade med den förbättrade versionen sedan 1999. Det tog mer än 12 år att släppa den första stabila versionen av CSS3.

Det finns enorma skillnader mellan CSS3 vs CSS (som vi snart kommer att få). Men faktum är att webbläsare redan var redo för tillägg till CSS3 när den släpptes. Som ett resultat anpassade de sig ganska snabbt till den nya versionen. Varje större webbläsare stöder nu CSS3, till och med Internet Explorer!

Naturligtvis fortsätter W3C fortfarande att utveckla CSS3 och HTML5, så en slutversion är osannolik. För att vara rättvis är en slutlig version inte heller en nödvändighet för tillfället, med tanke på hur snabbt internet fortskrider. Eftersom webbkraven och industrin själv växer och förändras så snabbt måste kodningen gå framåt lika snabbt, om inte mer.

CSS3 vs CSS Infographics

CSS3 vs CSS Skillnader definierade

Nu när du vet lite om bakgrunden bakom CSS3, låt oss titta närmare på vad den förändrade. Kanske är den största skillnaden mellan CSS3 och den tidigare versionen som den ersatte modulens separering. I CSS2 var allt en enda stor specifikation som definierade olika funktioner. CSS3 ändrade dock detta genom att ta in flera dokument som heter moduler. Varje modul har sina egna nya funktioner som inte påverkar kompatibiliteten hos den tidigare stabila CSS-versionen.

Mediefrågor

Det finns många moduler tillgängliga, men bara fyra publiceras som formella rekommendationer av W3C. Dessa stora fyra moduler är följande:

  1. Color, publicerad 2011
  2. Selectors Level 3, publicerad 2011
  3. Namnområden, publicerad 201
  4. Mediefrågor, publicerad 2012

Bland dessa är den viktigaste modulen Mediafrågor. I själva verket kan denna modul utan tvekan vara det viktigaste tillskottet som CSS3 förde till CSS i allmänhet. Mediefrågor gör några ganska enkla: det möjliggör tillämpning av vissa villkor på olika stilark. Detta gör att webbplatser kan vara flytande eller "lyhörda" för olika skärmstorlekar. Med andra ord kan webbplatser justera sina dimensioner och element så att de passar olika enheter. I dag är responsiv webbdesign förmodligen det största surrordet. Med tanke på att en majoritet av internetanvändningen nu sker på mobila enheter, är responsiv design absolut nödvändig och mediefrågor hjälper till att uppnå detta. Modulen gör det också möjligt för utvecklare att skräddarsy webbplatser för olika upplösningar utan att ändra eller ta bort innehåll.

Medieförfrågningar är också ganska enkla att ta reda på och lägga till. När du har använt dem några gånger kan du ganska räkna ut resten. Här är några exempel med kodrader:

@media-skärm och (maxbredd: 600px) (

bakgrund: #FFF;

)

Verkar tillräckligt enkelt, eller hur? Med dessa par kodrader kan du aktivera styling för skärmar med högst 600 pixlar bredd. Detta betyder att alla skärmar med en maximal bredd på 600 pixlar visar en vit bakgrund. Den maximala bredden är bara ett av flera villkor du kan tillämpa på ett formatmall på CSS3. En annan är max-enhetens bredd. Detta är skärmupplösningen och inte visningsområdet. Dessutom kan ett minimivärde anges istället för maximalt; använd bara "min" istället för "max". Du kan också kombinera de två, som nedan:

@media-skärm och (min-bredd: 600 px) och (max-bredd: 900 px) (

bakgrund: #FFF;

)

Här gäller stylingen endast för skärmar med en visningsbredd på 600-900 pixlar. CSS3 levereras med några fördefinierade formatmallar för populära mobila enheter, som Apple iPad och iPhone. Här är några av dem:

Det borde vara ganska tydligt nu hur viktiga mediefrågor är. Denna modul är mycket praktiskt för utvecklare som vill skapa responsiv webbdesign med minst möjliga kodning.

Rundade gränser

CSS3 har också några viktiga faktorer för webbdesign. I vissa fall kan gränserna rundas utan hacks med CSS3 som introducerar rundade gränser. Detta var ett stort plus för webbutvecklare och designers som tidigare kämpade med CSS-gränser. Inte överraskande att vissa av dessa funktioner fortfarande inte fungerar i gamla versioner av Internet Explorer. Den enda ytterligare koden du behöver lägga till i den specifika klassen i stilmallen är till exempel:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

kant: 2px fast # 897048;

Således gör CSS3 livet mycket enklare för webbutvecklare och designer. Släppet kom också med lutningar, vilket förvånansvärt inte var tillgängligt i tidigare utgåvor.

Rekommenderade kurser

  • Online-utbildning på webbtjänster i Java
  • Professionell spelutveckling inom C ++ -utbildning
  • Etiskt hackningsprogram
  • Vegas Pro 13 Training Bundle

Kantbilder, textskuggor

Andra element som lades till med CSS3 men saknade i tidigare versioner inkluderade kantbilder och ruta / textskuggor. CSS3 gjorde saker mycket enklare, vilket tog bort behovet av att lägga till hacks för något av ovanstående vanliga stylingelement. Här är till exempel den ensamma kodraden som ska läggas till för textskuggor:

text-skugga: 2px 2px 2px # ddccb5;

kolumner

CSS3 förenklade också hur man lägger till kolumner i innehållet. Allt du behöver göra nu är att lägga till fyra kodrader:

  1. kolonn-count
  2. kolumnbredd
  3. kolonn-gap
  4. kolonn-regel

Flera bakgrunder

Den senaste CSS-utgåvan har också lagt till möjligheten att direkt insidera flera bakgrunder från CSS snarare än att använda rondellhack som tidigare. Koden är otroligt enkel att komma ihåg och skriva, och är också oerhört viktig för att skapa moderna webbdesignelement. Här är ett exempel:

.multiplebackgrounds (

höjd: 100px;

bredd: 200 px;

stoppning: 20px;

bakgrund: url (top.gif) högst upp till höger utan upprepning,

url (bottom.gif) upprepa vänster uppe till vänster,

url (middle.gif) nedre repetition-z;

)

Säljarens prefix

Säljarprefix användes ofta under tiden då CSS3 just hade släppts. De hjälpte webbläsare att tolka CSS-kod. De används till denna dag, om din webbläsare inte kan läsa koden. Här är leverantörens prefix för stora webbläsare:

  • -moz- : Firefox
  • -webkit- : Webkit-webbläsare som Apple Safari och Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Operas prefix har också blivit överflödigt sedan företaget bytte mobil- och stationär webbläsare till Webkit-plattformen från sin Presto-renderingmotor. Även om leverantörsprefixet fortsätter att användas i viss utsträckning har det mestadels försvunnit vid denna tidpunkt.

Lade till pseudoklasser

Med tillägget av CSS3 fick vi också en massa ytterligare pseudoklasser, inklusive strukturella klasser för att rikta in element baserat på deras dokumentposition och relation till andra olika element. Här är några av dem:

  • : root riktar sig till dokumentets rotelement
  • : inte (e) riktar in element som inte matchas av de väljare som anges i (n)
  • : första barnet riktar sig mot det första barnet i en behållare oavsett typ av objekt
  • : först av typen riktar sig mot den första angivna typen av element i en överordnad
  • : nth-child (n) använder numeriska värden inom (n) för att rikta in barnelement med avseende på deras position i föräldern. Till exempel kan du använda detta för att lägga till växlande bakgrundsfärger till bloggkommentarer
  • : tomma målelement som inte har text eller barn, som tomma element som
  • : enda barn riktar in element i ett dokumentträd som är det enda barnelementet i föräldern

Nya CSS3-väljare

CSS3 erbjuder ett antal sätt att skriva upp CSS-regler genom de nya väljarna, ett nytt kombinerande och pseudo-element: här är de tre nya attributväljarna:

  • För exakta matchningar, element (foo = ”bar”)
  • För att matcha ett element med ett attribut som heter foo som börjar med 'bar', element (foo $ = ”bar”)
  • För att matcha ett element med ett attribut som heter foo som slutar med 'bar', element (foo * = ”bar”)

CSS3 kommer med flera nya pseudoklasser, av vilka några har diskuterats ovan. Här är några fler:

  • : nth-last-child (n) matchar exakt barnelement från det sista
  • : nth-of-type (n) matchar syskonelement med samma namn före dem i dokumentträdet
  • : nth-last-of-type (n) matchar syskonelement med samma namn från botten
  • : sista-av-typen riktar in sig mot den senast angivna typen av element i en överordnad
  • : endast-av-typen riktar sig mot det element som det är den enda typen
  • : målmålelement som är riktade av den hänvisande URI
  • : aktiverad matchar elementet när det är aktiverat
  • : inaktiverat matchar elementet när det är inaktiverat
  • : markerad riktar sig mot elementet när det markeras genom en kryssruta eller alternativknapp

En ny kombination

CSS3 kommer också med en helt ny kombination: elementA ~ elementB

Den här nya kombinationen matchar när elementA följs någonstans efteråt av elementB, men inte omedelbart efteråt.

Egenskaper för ny ruta

CSS3 har samma boxmodell som den tidigare versionen, men med några nya stilegenskaper som hjälper dig att utforma gränser och bakgrunder för dina rutor. De nya bakgrundsegenskaperna i CSS3 är:

  • background-clip

Den här egenskapen används för att definiera hur man ska klippa en bakgrundsbild. Standardklippdimensionerna är gränsrutan, men du kan ändra den till innehållslådan eller stoppningsrutan.

  • background-ursprung

Den här egenskapen används för att bestämma om bakgrunden ska läggas i gränsrutan, innehållslådan eller stoppningsrutan.

  • background-storlek

Den här egenskapen gör det möjligt för utvecklaren att ange bakgrundsbildens storlek och sträcka mindre bilder för att anpassa sidan.

CSS3 ändrade också upp några av de befintliga bakgrundsstilegenskaperna. Här är en titt på förändringarna:

  • bakgrund-repeat

Den här egenskapen har nu två nya värden: runda och utrymme. Runda ommarkerar bilden för att luta den flera gånger i en låda. Utrymmet placerar den lakade bilden jämnt i rutan utan att klippa ut.

  • background-fastsättning

Egenskapen nr innehåller ett "lokalt" värde så att bakgrunden bläddrar med elementinnehållet om elementet har en rullningslista.

Nya gränsegenskaper

CSS3 gör det möjligt att utforma gränser som dubbel, solid, streckad eller till och med som en bild. Kantbilder är ett intressant tillägg: de låter dig skapa en bild av alla fyra gränser och berätta sedan för CSS att tillämpa bilden på gränserna. Här är några av de nya gränsegenskaperna som levereras med CSS3:

  • gränseradius, gräns-nedre-höger-radie, gräns-övre-höger-radie, gräns-övre-vänstra-radie, gräns-nedre-vänster-radie låter dig skapa rundade gränser
  • border-image-source kan du ange en bildkällfil i stället för att använda fördefinierade kantstilar
  • border-image-segment representerar offset-offset från kanterna på kantbilderna
  • border-image-bredden definierar breddvärdet för din kantbild
  • border-image-outset specificerar beloppet bortom gränslådan som bilden sträcker sig till
  • border-image-stretch definierar lutning eller skalning av mitt- och sidodelarna av kantbilden

Slutsats - CSS3 vs CSS

Du kommer att lära dig mycket mer om CSS3 när du kodar mer. Men det finns en varning: du kan inte behärska CSS3 om du inte vet CSS. Att lära sig CSS3 innebär att bygga vidare på din förståelse och erfarenhet av CSS. Om du inte känner till CSS måste du lära dig det från början tillsammans med CSS3. Det goda är att om du inte är bekant med CSS bör det vara lättare att klubba både CSS3 vs CSS-lärande tillsammans för att göra det enklare och snabbare.

Rekommenderade artiklar

Här är några artiklar som hjälper dig att få mer information om CSS3 vs CSS så bara gå igenom länken.

  1. CSS vs HTML
  2. Spännande att känna till CSS Flexbox Essentials för nybörjare
  3. HTML5 vs JavaScript bästa sak att lära sig
  4. CSS vs CSS3: Skillnader

Kategori:

Mjukvaruutveckling