CSS Overganger 101

Til tross for folks forventning om endring og bevegelse på skjermen har CSS og HTML få kontroller som lar deg designe interaktivitet, og de som eksisterer er binære.

En lenke er enten en farge eller en annen. Et tekstfelt er enten en størrelse eller en annen. Et bilde er enten gjennomsiktig eller ugjennomsiktig. Ingen in-betweens fra en stat til en annen. Ingen overganger .

Dette har ført til at de fleste nettsider føler seg plutselige, med elementer som skifter og forandrer seg ungracefully.

Ja, vi kan bruke DHTML og utnytte jQuery-biblioteket for overganger, men dette krever mye kode for noe som burde være veldig enkelt.

Det vi trenger er en rask og enkel måte å legge til enkle overganger på siden, og i denne artikkelen finner du nyttig informasjon om CSS-overganger og hvordan du bruker dem.

Et par måneder tilbake stakk jeg foten min i munnen min noe som tyder på at designere skal begynne å bruke de nye CSS 3-teknikkene som tillater dem å gjøre noen av de grunnleggende stylingene de har bedt om. Det eneste problemet: Ingen av dem jobbet i Internet Explorer. Nei, ikke engang IE8.

Noen lesere følte at det var tegn på at rundt 75% av publikum ikke kunne se var uhensiktsmessig.

Til de leserne sier jeg "Hold på hatter" , fordi jeg skal introdusere deg til en annen ny CSS-egenskap som lar deg legge til overganger til ethvert element med bare et par kodelinjer.

CSS overganger blir introdusert akkurat nå i CSS Level 3, men er allerede lagt til som en utvidelse til Webkit. Akkurat nå betyr det at de bare fungerer i nettlesere basert på Webkit, inkludert Apple Safari og Google Chrome.

Hvor CSS-overganger kommer fra

Overganger har vært en del av Webkit en stund og er grunnlaget for mange av de kule tingene som Safari UI kan gjøre som andre nettlesere ikke kan.

Men W3C CSS Arbeidsgruppen motstod å legge overganger til sine offisielle spesifikasjoner, enkelte medlemmer hevder at overganger ikke er stilegenskaper og vil bli bedre håndtert av et skriptspråk.

Men mange designere og utviklere, inkludert meg selv, hevdet at disse faktisk er stilarter - bare dynamiske stiler, i stedet for de tradisjonelle statiske stilene som så mange av oss er vant til.

Heldigvis holdt argumentet for dynamiske stiler dagen. I mars begynte representanter fra Apple og Mozilla å legge til CSS Transitions Module til CSS Level 3 spesifikasjonen , tett modellert på hva Apple allerede hadde lagt til Webkit.

En kort notat om designforbedringer

Før vi fortsetter, la meg legge vekt på ett poeng: aldri stole på stiler for nettstedfunksjonalitet hvis stilene ikke er kompatible med nettleseren (dvs. tilgjengelig på alle vanlige nettlesere).

En gang til for de som savnet det: aldri stole på stiler for nettstedfunksjonalitet hvis stilene ikke er nettleser interoperabel .

Når det er sagt, kan du bruke stiler, for eksempel overganger, som designforbedringer for å forbedre brukeropplevelsen uten å ofre brukbarhet for de som ikke ser dem. Dette er greit så lenge du ellers kunne leve uten overgangene, og brukerne kan fortsatt fullføre sine oppgaver.

Først, noen overgangsprosjekter

CSS-overganger erstatter ikke alle bruksområder for DHTML, men her er noen måter å forbedre designet på i nettlesere som støtter overganger, uten å ødelegge det for resten av publikum.

Du må se denne siden i Apple Safari 3+ eller Google Chrome for å se disse overgangene fungerer. Begge nettleserne er tilgjengelige i Mac- og PC-smaker.

Roll-Overs

Den mest åpenbare bruken for overganger er å markere elementer (enten linker, tabeller, skjemafelt, knapper eller noe annet) når brukerens mus svinger over dem. Overganger er en fin måte å gi siden et jevnere utseende.

Eksempel # 1

Drop-Down Menyer

Rene CSS-menyer er enkle å oppnå, og overganger gir deg mulighet til å gi menyer nedtrekks- og fremhevingseffekter.

Eksempel # 2

animasjon

Du kan flytte et objekt mellom to punkter på siden og bruke overganger til å animere bevegelsen.

Eksempel nr. 3

Klikk og hold!

Overganger, stater og handlinger

Men hold deg et øyeblikk der, Tex. Før du drar i overganger, må vi forstå de forskjellige tilstandene som et element kan overgå.

Stater definerer hvordan et bestemt element samhandler med brukeren eller siden, og de er spesifisert i CSS ved hjelp av pseudoklassene. For eksempel, når brukeren svinger over et element, vil elementet bli stylet med hover pseudo-klasse.

Overganger fungerer ved å endre en stil over en tidsperiode mellom ulike elementstatuser. F.eks. Vil fargeværdien til standardtilstanden til et element passere gjennom mellomfargene i spektret før det vises som fargeværdien for hover-tilstanden.

En enkel overgang

La oss vurdere en enkel overgang fra en farge til en annen når brukeren svinger over en lenke. Som alle andre CSS-egenskaper legges overganger direkte til selgeren som den skal brukes på. Egenskapen kan da ta en av følgende fire verdier.

CSS eiendom
Egenskapen som skal endres (for eksempel farge). Se tabellen under for en liste over alle CSS-egenskapene som kan overføres.

Varighet
Hvor lenge overgangen vil vare, vanligvis i sekunder (for eksempel, .25s ).

Timing funksjon
Lar deg kontrollere hvordan varigheten er tidsbestemt. Snarere enn å bruke en enkel lineær telle, kan du øke hastigheten eller senk overgangen eller til og med angi et slag eller telle (for eksempel, linear ). Mer om dette senere i artikkelen.

Utsette
Hvor lenge å vente mellom handlingen og begynnelsen på overgangen, vanligvis uttrykt i sekunder (for eksempel, .1s ). Denne verdien kan utelates hvis du ikke vil ha en forsinkelse.

Fordi overgangsegenskapen startet som en Webkit-utvidelse, må vi inkludere begge transition og -webkit-transition egenskaper for bakoverkompatibilitet.

La oss først legge til begge disse egenskapene til :hover pseudo-klasse:

[Css]
a: svever {
fargen rød;
-webkit-overgang: farge .25s lineær;
overgang: farge .25s lineær;
}
[/ Css]

Nå, når en kobling er svevet over, i stedet for å hoppe fra blå til rød, vil den overgang for kvart i sekundet gjennom mellomfargene.

Selvfølgelig vil vi også overgå tilbake til standard lenkefarge, så vi legger til en overgang til :link (og sannsynligvis :visited ) pseudoklasser, med bare en veldig kort forsinkelse (en tiendedel av et sekund) før den forsvinner:

[Css]
a: link, a: besøkt {
farge: blå;
-webkit-overgang: farge .25s lineær .1s;
overgang: farge .25s lineær .1s;
}
[/ Css]

Legge til flere overganger

Fordi en overgang er en CSS-egenskap, hvis du legger til flere forekomster av overgangsegenskapen i samme regel, vil den siste overstyre tidligere, i stedet for å legge til dem. Så i den følgende regelen vil den eneste overgangen være bakgrunnsfargen:

[Css]
a: svever {
fargen rød;
bakgrunnsfarge: rgb (235.235.185);
-webkit-overgang: farge .25s lineær;
overgang: farge .25s lineær;
overgang: bakgrunnsfarge .15s lineær .1;
}
[/ Css]

Flere overganger legges til som en kommaseparert liste i samme overgangseiendomsdefinisjon:

[Css]
a: svever {
fargen rød;
bakgrunnsfarge: rgb (235.235.185);
-webkit-overgang: farge .25s lineær, bakgrunnsfarge .15s lineær .1s;
overgang: farge .25s lineær, bakgrunnsfarge .15s lineær .1s;
}
[/ Css]

Dette vil skape både en farge- og bakgrunnsfargeovergang.

Hva kan overgås?

Nesten enhver CSS-egenskap som har en farge-, lengde- eller posisjonskomponent, inkludert mange av de nye CSS 3-egenskapene, kan gis en overgang. Et bemerkelsesverdig unntak ser ut til å være bokseskygge.

Rett fra W3Cs Transitions-spesifikasjon, her er en liste over CSS-egenskaper som kan gis en overgang, sammen med de aspekter som forvandles. Jeg har uthevet noen av de mer nyttige egenskapene.

Overgangstiming og forsinkelse

Med overganger kan du variere tellefrekvensen, telle langsommere i begynnelsen og fart på slutten, omvendt eller noe i mellom. CSS-overganger kommer med fem nøkkelord for overgangstiming og lar deg angi verdier for din egen timingkurve.

En universell overgang?

Overganger vil raskt bli standard operasjonsprosedyre for alle nettsteder, og forbedre brukergrensesnittets tilbakemelding.

For å legge til allestedsnærværende overganger på hele nettstedet ditt, er det ett alternativ å legge til en overgang til universellvelgeren, lik en CSS-tilbakestilling. Dette gjelder en standard overgang til alle elementene på siden, slik at du kan holde en konsistent overgang:

[Css]
*: lenke, *: besøkt, *: svever, *: aktiv, *: fokus {
-webkit-overgang:
farge .25s lineær,
bakgrunnsfarge .25s lineær,
border-farge .25s lineær;
overgang:
farge .25s lineær,
bakgrunnsfarge .25s lineær,
border-farge .25s lineær;
}
[/ Css]

Et argument mot en universell overgang, og faktisk mot å bruke universellvelgeren for CSS tilbakestilles generelt, er at det å legge på en stil på hvert element på siden, kan redusere sidegengivelsen. Imidlertid har jeg aldri funnet noen bevis på at dette er tilfelle. Noen vet annerledes?

Jason Cranford Teague er forfatter av mer enn 13 bøker om digitale medier, inkludert Snakker i stiler: Grunnlaget for CSS for webdesignere . For mer informasjon om CSS og web typografi, sjekk ut Jasons nye bok, Fluid Web Typography . Følg Jason på Twitter: @jasonspeaking .

• ← Slik planlegger du for fravær av JavaScript
• 40 Utmerkede nettsteder som viser uttrykksmotor →