mixmastertobsi: CSS3 optimieren

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); }
}

  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

  2. 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

    --
    Man muss nicht alles wissen, man sollte aber wissen, wo das nicht gewusste zu finden ist.
  3. مرحبا

    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

  4. @@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'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)