Video: JavaScript og CSS3 transitions 2024
Den nåværende standarden for standarder for nettleserstøtte for CSS3-effekter og transformasjoner er i flux. Trolig, over tid vil kreftene som finnes i nettleserverdenen - de som publiserer Internet Explorer, Safari, Firefox og Chrome (og andre) - komme til en felles avtale om hvordan å kode for CSS3-effekter.
Men nå har de ikke kommet til en slik avtale. Det betyr at disse kule nye effektene, i hvert fall ved denne skrivelsen, må defineres separat for forskjellige nettlesere.
Dette er hva du trenger å vite om CSS3 og nettleserstøtte:
-
CSS3-effekter og transformasjoner støttes i nåværende versjoner av alle de store nettleserne, men Safari, Firefox og Opera krever forskjellige kodeprefixer for å lage CSS3-effekter og forvandler arbeid i nettleserne.
-
Tre-dimensjonale (3D) transformasjoner støttes ikke av nettlesere unntatt Safari og Chrome, og fordi de roterer objekter langs x -aksis (horisontal) eller y -aks vertikalt), gjør de ikke mye uten ekstra JavaScript for å animere dem. Når det er sagt, er CSS3-transformasjonens verden i konstant flux og utvikling, og 3D-transformasjoner kan få bredere støtte og bli mer tilgjengelig for utviklere.
-
CSS3-effekter og transformasjoner fungerer godt i alle moderne miljøer. Du trenger bare å inkludere overflødige versjoner av hver effekt, med forskjellige nettleserprefiks, for å få dem til å fungere i hver nettleser.
-
Noen foreldede nettlesere støtter ikke CSS3-effekter og transformerer i det hele tatt.
Bruk CSS3-effekter og transformer på en slik måte at selv om en nettleser ikke støtter CSS3, er sidens innhold ikke skadet. Følgende figur viser en avrundet rektangulær effekt. Til høyre støtter nettleseren CSS3-effekter, og til venstre støtter ikke nettleseren dem. I begge miljøer kan du lese innholdet, og noen designeffekter, for eksempel boksen og skriftfargen, støttes.
Fordi alle digitale enheter leveres med kopier og lim inn verktøy, innebærer arbeidsflyten å skape en effekt eller transformere egenskap, og deretter lage et sett med kopier med forskjellige prefikser.
Følgende er CSS3-kode som skaper skrå tekst. Merk at fem linjer med CSS er nødvendige for å definere samme skjev effekt for Firefox, Safari, Opera, Internet Explorer og en generell versjon. (Folket som gjør nettlesere ser ut til å svekke seg mot generisk versjon, men dette er ikke vedtatt universelt.)
. skrå {bakgrunnsfargen: # 999; høyde: 300px; bredde: 300px; -moz-transform: skew (12deg, 0deg); -webkit-transform: skew (12deg, 0deg); -ms-transformere: skew (12deg, 0deg); -o-transformer: skew (12deg, 0deg); transformere: skew (12deg, 0deg); farge: hvit; polstring: 15px; flyte: høyre; margin-topp: 6px; margin-høyre: 100px; margin-bunn: 6px; margin-left: 6px;}
Fire av disse variantene av CSS3-transformasjonen har prefikser (-moz, -webkit, -ms og -o); den generiske versjonen har ikke et prefiks.Hvert prefiks gjelder for ulike underliggende motorer i disse nettleserne:
-
Den -moz-transform-skew-koden gjelder Mozilla Firefox.
-
Webkit-transform-skew-koden gjelder for Safari og andre nettlesere som overholder WebKit-standarden (som inkluderer Dreamweaver CS5 Live-visningen).
-
Den generiske transformasjonen: skråkoden gjelder for "alle andre", inkludert de fleste iterasjoner av Internet Explorer 9, som ikke krever et nettleserprefiks for å tolke denne (eller andre) effekter. Imidlertid krever noen versjoner av IE9 prefixet. Så, det er en god ide å inkludere prefixet for-bare i tilfelle.
-
Radiokoden gjelder for Opera-nettleseren.
