2009-11-17 4 views
7

Ich habe mit Modernizr gearbeitet und es ist eine wunderbare Ressource, nur ein großartiges Projekt. die Art, wie ich verwendet habe, es ist jedoch:Warum modernisieren, wenn Browser CSS ignorieren, die sie nicht verstehen?

  • Entwurf mit der Basislinie (IE) CSS
  • mit CSS3 Effekten für erweiterte Browser Enhance

Wenn ich nicht vollständig würde die Stile ersetzen Warum sollte ich, basierend auf dem Verhalten, nicht einfach Stile wie Box-Schatten, Verläufe und Randradien zum Stylesheet hinzufügen? Wenn der Browser eine Regel nicht versteht, wird sie ignoriert, richtig? Und wenn JavaScript ausgeschaltet ist, kann ich es sowieso nicht benutzen.

Sollte ich die oben genannte Methode im typischen Fall und Modernizr für fortgeschrittene Fälle verwenden? Oder ist es falsch, sich darauf zu verlassen, dass Browser ignorieren, was sie nicht verstehen?

Antwort

6

Sie können (HTML 5) Elemente verwenden, die einige Browser noch nicht unterstützen. Sie können auch das Fallback-Styling angeben.

Viele Browser erstellen ihre eigenen CSS-Regeln für Dinge wie Text-Transformation. Mit Modernizr können Sie eine Regel schreiben und Modernizr macht es für mehrere Browser möglich.

Ich denke, es ist nur Bequemlichkeit.

+2

Das ist ein guter Punkt - keine Notwendigkeit, mit -webkit, -moz und -khtml Erweiterungen zu verwirren und müssen darüber nachdenken, welche Browser welche CSS3-Funktionen unterstützen. Ich weiß nicht, warum mir das nicht eingefallen ist. – Don

+0

Warum verwenden Sie nicht https://github.com/codler/jQuery-Css3-Finalize, um das Präfix hinzuzufügen, wenn Sie JS verwenden? – JKirchartz

+0

Problem mit Javascript-Lösungen wie diesem ist, wenn der Benutzer Javascript abstellt. Eine bessere Möglichkeit, browserspezifische Dinge zu tun, ist die Serverseite, sie ist schneller, cachierbarer und zuverlässiger. Ich habe das gemacht und es funktioniert perfekt. Schreiben Sie einfach Ihr CSS in zum Beispiel Firefox und machen Sie sich keine Sorgen um andere Browser, weil das CSS automatisch übersetzt wird! – Codebeat

16

Sie haben völlig Recht, dass ältere Browser vieles von CSS3 völlig ignorieren.

Dieses Grund, kann ich meine css3 in meinem Grunde Selektoren .. aber oft nutze die No-Objektklassen des modernizr den älteren Browser Fall zu behandeln:

div.box { 
     height:50px; 
     -moz-box-shadow: 3px 3px 5px #555; 
     -webkit-box-shadow: 3px 3px 5px #555; } 

div.box span.fakeshadow { 
     display:none; 
} 

.no-boxshadow div.box span.fakeshadow { 
     display:block; background: url('fakeshadowbg.png'); 
} 

Ich hoffe, das macht es klarer .

+3

Wenn ich von einem der Schöpfer von Modernizr komme, müsste ich sagen, ja, das macht es klarer. Ausgezeichnetes Beispiel auch. Alle 3 Fälle, um die ich mich Sorgen machte (fähiger Browser, älterer Browser, älterer Browser mit deaktiviertem JavaScript), werden behandelt und die Website wird ordnungsgemäß beeinträchtigt. – Don