Ich arbeite an einer Responsive Design-Website, um Inhalte für alle Bildschirmgrößen bereitzustellen. Ich habe Medienabfragen für 5 verschiedene "Schritte" und die CSS-Datei ist ungefähr 30 KB groß.
Wäre es besser, dies in separate Dateien aufzuteilen und sie so zu gestalten:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
oder sollte ich sie in einer CSS-Datei behalten?
Update: Ich wollte nur hinzufügen, dass mein Hauptanliegen das Öffnen / Rendern von Seiten über Browser / Geräte hinweg und nicht die einfache Entwicklung war.
Antworten:
Ich denke, es hängt wirklich davon ab, was Sie für die Entwicklung am einfachsten finden und was Ihnen dabei hilft, ein aufgeräumtes Stylesheet zu führen.
Der einzige wirkliche Nachteil, den ich mir beim Teilen vorstellen kann, ist, dass Sie, sollte das Attribut eines Elements in all Ihren Stylesheets erscheinen, 5 separate Dateien aktualisieren müssen, um es zu ändern (anstatt nebeneinander an einer Stelle zu erscheinen).
Laut der Antwort in diesem Beitrag werden alle Stylesheets vom Browser heruntergeladen, sodass die Aufteilung der Auflösung keine Bandbreitenersparnis bedeutet: /programming/16657159/when-using-media-queries-does-a -telefon-laden-nicht-relevante-abfragen-und-bilder
quelle
Es hängt ein wenig davon ab, was Sie erreichen möchten: Versuchen Sie, Ihre Seite schneller zu laden, oder versuchen Sie, die Entwicklung zu vereinfachen?
Wenn Sie auf Letzteres zielen, können Sie mehrere Blätter verwenden, aber das ist alles eine Frage der Präferenz. Ich finde es am einfachsten, eine große Datei zu verwenden, da dies Ihnen einen Überblick über alle Stile gibt, die Sie deklariert haben.
Wenn Sie eine Seite schneller als am besten laden möchten, sollten Sie die Anzahl der Anfragen minimieren, da der Aufwand für Anfragen ziemlich hoch ist. Außerdem können Sie eine Entwicklungsversion für sich behalten und ein minimiertes CSS für das Web bereitstellen (ich finde YUI eine gute Methode: http://www.refresh-sf.com/yui/ ).
Weiterhin würde ich versuchen, das CSS selbst zu optimieren. Sie können beispielsweise versuchen, sehr ähnliche Klassen zusammenzuführen:
Kann umgewandelt werden in:
Das Einzige, was Sie tun müssen, ist, dass Sie den HTML-Code leicht von
<span class="bold-and-italic">foo bar</span>
in ändern müssen<span class="bold italic">foo bar</span>
Ich kann Ihnen nur empfehlen, einen Blick auf Bootstrap ( http://getbootstrap.com ) zu werfen. Diese Jungs haben großartige Arbeit geleistet, wenn es darum ging, Klassen in mehrere "Unterklassen" aufzuteilen .
Ich hoffe das hilft.
quelle
.important
Es ist wahrscheinlich am besten, nur eine CSS-Datei zu haben, diese aber zu verkleinern und zu komprimieren. Vorausgesetzt, Ihre 30 KB sind vorher vorhanden, werden Sie wahrscheinlich die Dateigröße mit Minimierung (Leerraumentfernung) und Gzipping auf etwa 5 KB reduzieren.
Wenn Sie sich aufteilen, werden Sie wahrscheinlich schneller, aber nur unter bestimmten Bedingungen.
<link>
-Tags mit unterschiedlichen<link>
Medienattributen einzufügen. Browser scheinen unabhängig von den Medienabfragen alle bearbeiteten Stylesheets zu laden (danke an @cimmanon für diese Info, wusste das nicht). .Außerdem: Nicht vorzeitig optimieren. Tun Sie dies nur, wenn Sie Leistungsprobleme haben.
quelle
<link rel="stylesheet" />
Tag für alle Ihre Medienabfragedateien verwenden, können Sie den Browser nicht daran hindern, sie herunterzuladen. Sie müssten Browser-Sniffing auf der Serverseite oder JavaScript verwenden, um die Ansichtsfenster-Dimensionen zu untersuchen und die entsprechenden Stylesheets einzufügen. Beides ist keine gute Wahl.<link>
Medienattributs zum -Tag hätte das Laden nicht übereinstimmender Stylesheets verhindert. Warum machen Browser das? Dies ist natürlich der wichtigste Grund, die Stylesheets nicht zu teilen.Sie sollten Ihre CSS-Dateien basierend auf Medienabfragen aufteilen, da CSS-Dateien gerendert werden und blockieren.
Wenn der Browser Ihr DOM erstellt, muss er zuerst warten und alle Ihre CSS-Dateien laden. Sie reduzieren die Ladezeit Ihrer Seite, wenn einige Ihrer CSS-Dateien nur aufgrund bestimmter Medienabfragen geladen werden.
Dies gilt auch für das Hinzufügen von Async zu einem JavaScript-Skript-Tag. Bsp .:
<script src='myfile.js' async></script>
.Das DOM muss nicht darauf warten, dass Ihre JS-Datei geladen wird. Fügen Sie async nur hinzu, wenn für die Erstellung Ihres DOM bei Onload kein JavaScript erforderlich ist.
quelle
Ich würde das gerne sagen.
Bewahren Sie sie für die Produktion immer in einer Datei auf. Der Grund dafür ist, dass es für den Browser effizienter ist und dass dies Ihr Hauptinteresse (IMO) sein sollte, wenn Sie von der Entwicklung zur Produktion wechseln.
Die Entwicklung ist ein anderer Fischkessel. Ich neige dazu, Medienabfragen so aufzuteilen, dass sie von jedem Element stammen, zB:
Wie im Allgemeinen, wenn ich ein Element ändere, möchte ich nicht überall nach CSS suchen müssen (obwohl Sie so etwas wie grep ... verwenden können).
Aber eine Sache, die ich sagen würde, ist, dass es sich lohnt, die Site selbst, den Entwicklungsprozess und das Soforth zu betrachten. Wenn Sie wirklich der Meinung sind, dass es sich lohnt, sie in Dateien zu unterteilen, die auf der Bildschirmgröße basieren, probieren Sie es aus. Machen Sie eine Kopie der Site (wenn möglich), probieren Sie die Kopie aus - wenn es einfacher ist, verwenden Sie diese. Sie müssen kein einheitliches Paradigma für die Entwicklung einer Website befolgen.
quelle
Einfach: Verwenden Sie 1 Stylesheet und fügen Sie Kommentare hinzu, um das Auffinden und Ändern der CSS-Stile zu vereinfachen. Beispiel:
Wenn Sie möchten, können Sie mehrere Stylesheets verwenden und diese für jede bestimmte Größe aufrufen.
quelle
Ich würde mir lieber Bootstrap anschauen . Es ist eine CSS-Datei, die das gesamte CSS enthält. Es funktioniert auf fast 99% der Browser und ist äußerst reaktionsschnell.
Klicken Sie auf die Live-Demo und vergrößern Sie sie (
Ctrl +
= Vergrößern,Ctrl -
= Verkleinern,Ctrl 0
= Normal) oder öffnen Sie sie auf Ihrem Handy, um zu sehen, wie sie wiedergegeben wird.quelle