CSS3 optimieren
mixmastertobsi
- javascript
Hallo, gibt es eine Möglichkeit folgenden CSS Code zu optimieren.
Muss ich wirklich jeden Browser-Type separat anlegen?!?
#content_banner li.scale {
-moz-animation: scale_ani1 2s ease;
-webkit-animation: scale_ani1 2s ease; /* Safari and Chrome */
-o-animation: scale_ani1 2s ease; /* Opera */
}
#content_banner li.scale2 {
-moz-animation: scale_ani2 2s ease;
-webkit-animation: scale_ani2 2s ease; /* Safari and Chrome */
-o-animation: scale_ani2 2s ease; /* Opera */
}
@-moz-keyframes scale_ani1 {
0% { -moz-transform: scale(1,1); }
10% { -moz-transform: scale(0.95,0.95); }
90% { -moz-transform: scale(0.95,0.95); }
100% { -moz-transform: scale(1,1); }
}
@-moz-keyframes scale_ani2 {
0% { -moz-transform: scale(1,1); }
10% { -moz-transform: scale(0.95,0.95); }
90% { -moz-transform: scale(0.95,0.95); }
100% { -moz-transform: scale(1,1); }
}
@-webkit-keyframes scale_ani1 {
0% { -webkit-transform: scale(1,1); }
10% { -webkit-transform: scale(0.95,0.95); }
90% { -webkit-transform: scale(0.95,0.95); }
100% { -webkit-transform: scale(1,1); }
}
@-webkit-keyframes scale_ani2 {
0% { -webkit-transform: scale(1,1); }
10% { -webkit-transform: scale(0.95,0.95); }
90% { -webkit-transform: scale(0.95,0.95); }
100% { -webkit-transform: scale(1,1); }
}
@-o-keyframes scale_ani1 {
0% { -o-transform: scale(1,1); }
10% { -o-transform: scale(0.95,0.95); }
90% { -o-transform: scale(0.95,0.95); }
100% { -o-transform: scale(1,1); }
}
@-o-keyframes scale_ani2 {
0% { -o-transform: scale(1,1); }
10% { -o-transform: scale(0.95,0.95); }
90% { -o-transform: scale(0.95,0.95); }
100% { -o-transform: scale(1,1); }
}
Und was hat das mit Javascript zu tun?
Also bei Less-PHP kannst du dir für sowas Funktionen schreiben die du benutzen kannst.
Gruß
funktionierender
T-Rex
hi,
Hallo, gibt es eine Möglichkeit folgenden CSS Code zu optimieren.
Muss ich wirklich jeden Browser-Type separat anlegen?!?
Leider muss man in der tat noch alle möglichkeiten abfangen.
Wenn du gerne mit Jquery arbeitest, könntest du das ganze mit einem CSSHook machen. Dort brauchst du z.b. nur border-radius angeben und jquery macht das passende für den browser drauß. Allerdings bremmst so was natürlich die browser ein, da sie nach dem laden noch mal rendern müssen.
Gruß Niklas
مرحبا
Hallo, gibt es eine Möglichkeit folgenden CSS Code zu optimieren.
Muss ich wirklich jeden Browser-Type separat anlegen?!?
@-moz-keyframes scale_ani1 {
0% { -moz-transform: scale(1,1); }
10% { -moz-transform: scale(0.95,0.95); }
90% { -moz-transform: scale(0.95,0.95); }
100% { -moz-transform: scale(1,1); }
}
Für sowas eignet sich Sass oder Less sehr gut. Mit einem Mixin könntest du das bspw. vereinheitlichen und leichter pflegen.
Ohne es getestet zu haben:
@mixin scale($browser) {
0% { -{$browser}-transform: scale(1,1); }
10% { -{$browser}-transform: scale(0.95,0.95); }
90% { -{$browser}-transform: scale(0.95,0.95); }
100% { -{$browser}-transform: scale(1,1); }
}
/*
Und so rufst du es auf
*/
@-moz-keyframes scale_ani1 {
@include scale('moz');
}
@-webkit-keyframes scale_ani1 {
@include scale('webkit');
}
mfg
@@mixmastertobsi:
nuqneH
Hallo, gibt es eine Möglichkeit folgenden CSS Code zu optimieren.
Muss ich wirklich jeden Browser-Type separat anlegen?!?
Natürlich. Denn das ist der Sinn von Vendor-Präfixen.
Wenn’s denn JavaScript sein soll, kannst du mal einen Blick auf Prefixfree werfen.
Ich würde aber auch einen CSS-Präprozessor vorziehen.
Qapla'