Halten Sie Ihren CSS3-Code Markup schlank

Dieser Artikel ist Teil unseres "HTML5 / CSS3-Tutorials" - engagiert, um Sie zu einem besseren Designer und / oder Entwickler zu machen. Klick hier um mehr Artikel aus derselben Serie zu sehen.

Webentwickler können durch die Verwendung einer ausgefeilteren CSS3-Syntax viel Zeit sparen. Benutzer, die Ihre Seite besuchen, erwarten die schnellstmögliche Ladezeit. Daher liegt es in Ihrer Verantwortung, die Dateigrößen gering zu halten. Es gibt viele kurze Tricks mit CSS und insbesondere unter dem neuen CSS3-Modell.

Ich habe einige dieser Ideen in der Anleitung unten zusammengestellt. Wir sollten auch andere Bereiche ansprechen, beispielsweise die Minimierung Ihres CSS-Codes. Im Browser stehen Tools zur Verfügung, mit denen Entwickler den Styling-Prozess unterstützen können. Sie sollten jedoch Shortcodes mit dieser Reduzierung der Dateigröße kombinieren, um den Rendering-Prozess Ihrer Website zu optimieren.

Grundlegende Tipps zum Formatieren

Bevor wir uns mit der eigentlichen CSS-Syntax beschäftigen, möchte ich das Thema Wie um Ihr CSS zu schreiben. Wenn Sie mit dem Webdesign vertraut sind, haben Sie wahrscheinlich schon früher ein Stylesheet gesehen, wahrscheinlich mehr als einmal. Der erste Teil jedes Befehls wird als Wähler. Dies betrifft den Elementtyp, der die in den geschweiften Klammern hinzugefügten Stile (auch bekannt als.) Erhält Eigenschaften.

Inline-Ebene

Bei Inline-Styles wird jede Eigenschaft nacheinander mit Leerzeichen geschrieben, um sie voneinander zu trennen. Diese Methode eignet sich am besten für Selektoren, bei denen Sie nur einige Eigenschaften benötigen. Dadurch sparen Sie Platz auf der Seite und das Scrollen durch Ihr Stylesheet wird wesentlich schneller. Falls Sie noch nie zuvor Inline-CSS gesehen haben, habe ich unten ein kleines Beispiel hinzugefügt, in dem auf HTML-Ankerlinks verwiesen wird.

a color: # 648cc8; Schriftdicke: fett;  a: hover color: # 739cda; Textdekoration: keine;  a.alt color: # bd4949! important;  

Block Level

Blockeigenschaften hingegen werden in einer Zeile pro Schlüssel / Wert-Paar eingegeben und sind oft für schnellere Bearbeitungen beim Scannen des Codes eingerückt. Etwa 99% der saubereren Stylesheets, die ich für diese Formatierungen verwendet, verwenden diese Formatierung, und sie ist für viele Designer zu einem Industriestandard geworden. Wenn Ihr Selektor mehr als 6 oder 7 Eigenschaften verwendet, ist dies die beste Formatierung.

Wenn Sie die vielen neuen CSS3-Eigenschaften berücksichtigen, erkennen Sie auch, wie schnell sich Ihre Stylesheets auffüllen. Viele dieser Eigenschaften unterstützen browserspezifische Kopien, für die fast doppelte Codeeingaben erforderlich sind (z. B. Randradius). Sie können mein Beispiel eines Blockeigenschaftssatzes unten auf ein Beispiel für einen Wrapper-Beispieldivierer überprüfen.

.wrap display: block; Polsterung: 6px 10px; Hintergrund: #FFF; Grenzradius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; 

CSS ist in keiner Weise besser als die andere. Letztendlich haben Sie als Entwickler die Wahl, welchen Stil Sie bevorzugen, und dies hängt auch von dem Projekt ab, an dem Sie arbeiten. Es ist sogar üblich, CSS zu finden, wo Designer beides vermischt haben! Ich fühle das persönlich “in Arbeit” Bei Blockstilen ist es normalerweise einfacher, da ich das Stylesheet ständig prüfe, um Bearbeitungen oder Ergänzungen vorzunehmen. Aber für verkehrsintensive Domains ist das Minimieren Ihrer CSS-Datei der absolut beste Weg.

Sie schlank halten

Durch die Verwendung der vielen in CSS3 verfügbaren Kurzcodes können Sie viel Entwicklungszeit einsparen. Das Bearbeiten von HTML-Elementen wird viel einfacher, da Sie diese zeitsparende Sprache verstehen. Darüber hinaus erscheint Ihr Code klarer und übersichtlicher.

Der einzige Nachteil ist, dass nicht alle Browser diese Eigenschaften vollständig unterstützen. Es gibt Problemumgehungen für viele der vorhandenen Probleme, z. B. in Internet Explorer und Netscape. Glücklicherweise kommt das Web immer weiter voran, und da CSS3 immer beliebter wird, werden wir sicherlich auch eine Zunahme der Browserkompatibilität erleben.

RGBa-Farbtransparenz / Deckkraft

Der neue RGBavalue ist nicht genau ein CSS3 Eigentum, aber Alpha-Transparenz ist nur für CSS3 spezifisch. Anstelle der üblichen "Rot-Grün-Blau" -Werte, die Sie als Farbe übergeben, können Sie jetzt die Farbe eingeben schließen Sie eine vierte Option der Farbtransparenz ein. Aus diesem Grund werden Webentwickler fast vollständig mit transparenten PNGs erstellt.

Die Grundsyntax erfordert einen Wert von 0-255 in den ersten drei (3) Slots und 0-1.0 in der Alpha-Position. Der Farbbereich ist spezifisch dafür, wie viel von jedem Farbton (RGB) sichtbar ist, wobei 0 nichts und 255 voll ist.

 / ** Syntax ** / background: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** Beispiel ** / div Hintergrund: rgba (255, 255, 255, 0.3); 

Browserübergreifende Kompatibilität

Eine andere Eigenschaft Opazität kann unter bestimmten Umständen verwendet werden. Dies wirkt sich jedoch auf das gesamte HTML-Element und den gesamten Inhalt aus, nicht nur auf den Hintergrund, wie Sie es in meinem Beispiel gesehen haben.

Leider unterstützt Internet Explorer den RGBa-Farbwert noch nicht. Im Allgemeinen sollten Sie eine Fallback-Eigenschaft mit voller Deckkraft für diese weniger standardmäßigen Browser angeben. Sie haben dies mit den gleichen Werten eingestellt, jedoch ohne den vierten (Deckkraft). Es würde ungefähr so ​​aussehen rgba (255, 255, 255)

Darüber hinaus kann der Internet Explorer durch die Bedingungen etwas eleganter behandelt werden. Sie können tatsächlich überprüfen, ob der Browser IE ausführt, und auf Befehl einen proprietären Microsoft CSS-Filter anzeigen. Ich habe dies in meinem Beispiel unten gezeigt (beachten Sie, dass dies irgendwo in Ihrer HTML-Datei erscheinen würde):

CSS3-Grenzradius

Ich habe einige verwirrende Forenthreads über das Erstellen abgerundeter Rahmen mit CSS3 gelesen - nicht so sehr, wie es gemacht wird, aber mit wählerischer Browserunterstützung krabbeln Webentwickler nach dem einfachsten Code, der wie erwartet funktioniert.

 / ** Syntax ** / border-radius: oben links oben rechts unten rechts unten links;

Das Grenzradius property hat die gleiche Syntax wie das Erstellen eines Standardrahmens. In diesem Fall zielen wir jedoch auf die Ecken der Box. Diese Eigenschaft akzeptiert tatsächlich 1 - 4 Werte und richtet sich jeweils an unterschiedliche Ecken.

• 1 Wert: Alle vier Ecken werden auf denselben Wert gerundet
• 2 Werte: Der erste Wert gilt für oben links und unten rechts während der zweite Wert trifft oben rechts und unten links
• 3 Werte: Gilt zuerst für die oben links Ecke, die zweite ist beides unten links & oben rechts Der dritte und letzte Wert wird auf angewendet unten rechts
• 4 Werte: Alle 4 Werte zielen auf Ecken in der folgenden Reihenfolge: oben links, oben rechts, unten rechts, unten links

 / ** Beispiel ** / div Randradius: 4px 4px 8px 4px;  div border-radius: 4px 4px 8px; 

Im obigen Code verwenden wir also Grenzradius einen abgerundeten 4px-Effekt auf alles außer dem unten rechts Rand, der eine 8px geglättete Kurve erhält. Wenn Sie es bemerkt haben, wenden beide Codes den gleichen Style-Effekt an.

Browserübergreifende Kompatibilität

Jetzt ist das Hauptproblem das Grenzradius wird nur von wenigen Browsern unterstützt. Internet Explorer 9 hat kürzlich großartige Unterstützung hinzugefügt, und Opera wird dies ebenfalls wiedergeben. Aber auch Opera hat ein eigenes Grundstück mit angelegt -o-Grenzradius zielen auf ihre spezifische Browser-Engine. zusätzlich -Moz-Rand-Radius wird von Firefox / Gecko-Software und unterstützt -Webkit-Grenzradius für Google Chrome / Safari.

Der nachstehende Code ist ein Beispiel für meine nackte Knochenvorlage zum Erstellen abgerundeter Ecken mit der größten globalen Browserunterstützung.

 div Randradius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;  

Lust auf einen Schlagschatten?

Die andere wirklich tolle Facette von CSS3 ist die Unterstützung für Box und Textschatten. In der Vergangenheit war dies ein Problem für Entwickler, da Hintergrundbilder die einzig realistische Option waren. Diese Syntax folgt eigentlich einer Abkürzungsrolle, die viel einfacher ist als die anderen Eigenschaften, die wir behandelt haben. Es ist schwer, sich an die richtige Reihenfolge der Schlüsselwerte zu erinnern - aber je mehr Übung Sie einsetzen, desto einfacher wird es.

Leider ist der Internet Explorer mal wieder der ungerade. Alle anderen großen Browser, einschließlich Firefox, Google Chrome, Safari und Opera, unterstützen das Text-Schatten Eigentum. Die Entwickler haben versucht, ihre eigene IE-Unterstützung zu erstellen, sind aber immer noch sehr einschränkend. Die grundlegende Syntax lautet wie folgt:

 / ** Syntax ** / Text-Schatten: X-Versatz Farbton des Verschiebungsradius; / ** Beispiel ** / div Textschatten: 2px 2px 1px # 111; 

Der X- und Y-Versatz teilt dem Browser mit, wie weit rechts und unten der Schatten erscheinen soll. Sie können negative Werte verwenden, um den Schatten oberhalb bzw. oberhalb von links zu positionieren. Dies sieht jedoch sehr unbeholfen aus, daher empfehle ich positive ganze Zahlen. Der Unschärferadius-Wert kann auch zum Glätten der starren Kanten verwendet werden, wenn der Textschatten unnatürlich erscheint.

Diese Syntax untersucht nur die grundlegende Notation, wenn ein einzelner Schatteneffekt erstellt wird. Fortgeschrittene Designer haben bereits mehrere Schatten gleichzeitig erstellt! Ich beziehe mich auf diesen großartigen Blogbeitrag aus dem April 2011, der ausführlich auf imposante Textschatten eingeht. Wenn Sie Zeit haben, überfliegen Sie den Inhalt, um sich einen Eindruck von den erweiterten Funktionen zu verschaffen. Stellen Sie sicher, dass Sie ihn als zukünftige Referenz markieren!

Browserübergreifende Kompatibilität

Der größte Nachteil ist der Internet Explorer. Immer wieder hat Microsoft eine eigene Browser-Rendering-Engine herausgebracht, die bestenfalls unterdurchschnittlich ist. Jetzt, auch wenn CSS3 die Herrschaft über Textschatten übernimmt, bleibt der IE zurück. Es gibt eine großartige Demo-Website, auf der Sie Codebeispiele und traditionelle CSS-Bedingungskommentare finden können.

Grundsätzlich prüfen Sie, ob der Browser, den Ihr Benutzer verwendet, mit einer beliebigen Version von Internet Explorer 9 oder darunter übereinstimmt. Dann können Sie mit MS-Filtern einen Schatten in jedes Textelement einfügen (oben verwenden wir einen Absatz)..

Übergänge erleichtern

CSS3 Übergang ist die heißeste Eigenschaft auf dem Designmarkt seit Omas Flapjacks! Webdesigner haben sich mit reinen CSS-Übergängen so sehr beschäftigt, auch wenn die Unterstützung hauptsächlich auf Webkit-Browser beschränkt ist. Sie können natürlich sekundäre Eigenschaften für Mozilla und Opera verwenden. Aber die Kurzschreibweise ist wirklich fesselnd, besonders wenn Sie aus irgendeinem Grund gegen JavaScript-Animationen sind.

Lassen Sie uns zunächst die ursprüngliche Übergangseigenschaft betrachten. Dazu werden 4 Werte benötigt, die Sie auch in Eigenschaften aufschlüsseln können. Sie entsprechen dem Übergang Eigentum(was ist der Effekt), Dauer(wie lange es herausgezogen wird), Timing-Funktion(Geschwindigkeitsänderung über der Animation) und verzögern(Anzahl Sekunden bis zum Animieren).

/ ** Syntax ** / Übergang: Eigenschaftszeit-Timing-Funktionsverzögerung; / ** example ** / img Übergangseigenschaft: Deckkraft; Übergangszeit: 2s; Übergangszeitfunktion: Einstieg; Übergangsverzögerung: 0,5 s; 

Sie sollten den Zweck der meisten dieser Eigenschaften intuitiv verstehen, mit Ausnahme der Timing-Funktion. Obwohl diese Eigenschaft zunächst verwirrend ist, wird der Übergang einfach anders animiert, sodass der Effekt langsamer beginnt, langsamer endet oder etwas Ähnliches.

W3 Schools verfügt über eine Online-Timing-Funktion, in der alle möglichen Werte aufgelistet sind, die Sie ausprobieren können. Ich bin ständig auf der Suche nach diesen Guides, aber sie machen so nützliche Lesezeichen.

Browserübergreifende Kompatibilität

Lassen Sie uns nun die volle Browserunterstützung ins Spiel bringen. Die Übergangseigenschaft lautet standardmäßig nur wird von neueren Versionen von Safari unterstützt. Trotzdem benötigen viele Benutzer noch die -Webkit Präfix, das auch für Google Chrome und ähnliche Rendering-Engines gilt. Unten ist ein “abgeschlossen” Codeblockvorlage Ich empfehle das Speichern und Verwenden, wenn Sie von den meisten Webbrowsern Übergangsunterstützung benötigen.

 img Übergang: Deckkraft 2s Leichtigkeit in 1s; -webkit-Übergang: Opacity 2s-Einstieg in 1s; / * chrom, safari, flock * / -moz-Übergang: Deckkraft 2s Leichtigkeit in 1s; / * Mozilla + Gecko * / -o-Übergang: Deckkraft 2s Leichtigkeit in 1s; / * opera * /

Text-Strich-Effekte

Diese Eigenschaft ist nicht riesig und Sie werden heutzutage nicht viele Webdesigner finden. Aber du kannst verwenden Textanschlag um wirklich nette Effekte mit Ihren Schriftarten zu erzeugen. Webkit-Browser wie Safari und Chrome sind bisher die einzigen echten Unterstützer dieser Eigenschaft. Opera und Firefox haben Schwierigkeiten, Textobjekte mit den gleichen Konturen wiederzugeben.

 / ** Syntax ** / p -webkit-Text-Strich: Breite Farbe;  / ** Beispiel ** / p -webkit-Text-Strich: 1px # 222;  

Browserübergreifende Kompatibilität

Wenn Sie das Gefühl haben, dass Stricheffekte erforderlich sind, sollten Sie immer eine Sicherungsfarbe angeben. Mozilla und Opera können durchkommen, Internet Explorer-Benutzer haben jedoch keine anderen Optionen. Leider ist dies eine der neueren CSS3-Eigenschaften, die von der Community der Webbrowser-Entwickler nicht genug Unterstützung gefunden hat. Sie sollten etwas Zeit mit diesem großartigen Web-Tool verbringen, das speziell für das Erstellen dieser CSS3-Textkonturen erstellt wurde.

Schachtelgröße

Die Box-Size-Eigenschaft gibt Ihnen mehr Kontrolle über die Gesamtbreite / -höhe aller Blockelemente. Standardmäßig bilden width / height + border + margin + padding die Gesamtgröße einer Box. Durch die Verwendung von border-box in Ihrem Inhalt werden jedoch alle Auffüllungen und Ränder verschoben innere um die Breite genau gleich zu halten. Es gibt nur zwei Werte für diese Eigenschaft mit Inhaltsfeld ist der Standard.

div Breite: 550px; Polsterung: 9px; Box-Dimensionierung: Border-Box; / * width bleibt bei 550px * /

Wie Sie sich vorstellen können, wird sich dies irgendwann während Ihrer CSS-Karriere als nützlich erweisen. Füllungen und Ränder können sehr schmerzhaft sein, und wenn Sie Rahmen hinzufügen, verlieren Sie oft die Pixel.

Browserübergreifende Kompatibilität

Opera und IE 8 unterstützen diese neue Eigenschaft standardmäßig. IE7 und darunter bleiben beim Einrichten der Inhaltsbox hängen, es sei denn, Ihre Besucher verwenden den Quirks-Modus. Die einzigen Ergänzungen, die Sie über spezifisch zielgerichtete Webkits und Mozilla-basierte Browser-Engines wissen sollten.

div -webkit-box-size: border-box; / * Safari / Chrome * / -moz-box-sizeizing: border-box; / * Firefox * / Box-Sizing: Border-Box; / * Opera / IE8 + * /

Reine CSS3-Spalten

Spalten sind mit CSS3 etwas knifflig, können jedoch mit minimalem Code ausgeführt werden. Die 2 Eigenschaften, auf die Sie sich konzentrieren möchten, sind Spaltenanzahl und Spaltenlücke. Die Anzahl gibt die Gesamtzahl der Spalten an, die Sie anwenden möchten, während die Lücke einen Rand zwischen den Spalten erzeugt.

 div # cols Spaltenanzahl: 3; Spaltenlücke: 10px; 

In meinem Beispiel sehen wir die ID #cols, die als Container verwendet werden. Im Innern teilen wir das div in 3 Spalten auf, mit einem Abstand von jeweils 10 Pixeln. Weiter konnte man setzen Spaltenbreite wird verwendet, um die Gesamtbreite jeder Spalte festzulegen, anstatt eine durchgehende Zahl aufzulisten.

Browserübergreifende Kompatibilität

Alles vor dem IE8 kann diese Eigenschaft einfach nicht nutzen. Wie wir jedoch in jedem Beispiel gesehen haben, bieten Mozilla und Webkit eigene Lösungen für mehrere Browser. Wenn Sie eine Vorlage benötigen, schauen Sie sich unten meinen kleinen Beispielcode an:

 div # sidebar width: 210px; -Zahlsäulenzahl: 3; -Moz-Spaltenlücke: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; Spaltenanzahl: 3; Spaltenlücke: 7px;  

Custom @ font-face

Sie müssen von der Aufregung bezüglich benutzerdefinierter CSS3-Schriftarten gehört haben. Mit der @ font-face-Eigenschaft können Sie externe Schriftstile importieren und diese wie jede andere Familie verwenden. Die Syntax ist etwas kompliziert und Sie müssen einige Zeit damit verbringen, es richtig zu machen. Der Block für @Schriftart wird verwendet, um einen Familiennamen zu definieren, danach können Sie diesen in Ihrem verwenden Schriftfamilie Eigenschaften überall!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), URL ('New_Font.eot'); / * Nur Internet Explorer * / 

Sie sehen oben, dass ich keinen bestimmten Schriftarttyp anstrebe, aber die Syntax sollte hervorgehoben werden. Beachten Sie, dass Internet Explorer nur unterstützt .eot Schriftarten, während .ttf und .otf sind beliebte Optionen für die anderen Browser. Es ist auch wichtig, dass Sie verstehen, dass Sie Schrift-URLs von direkten Links, z. URL ("https://www.hongkiat.com/css3/fonts/myfont.ttf");

Bei diesem Setup gibt es kein echtes Cross-Browser-Problem, da alle Rendering-Engines diese Schrifttyp-Dateitypen analysieren können. Denken Sie daran, dass Sie für die IE-Unterstützung sowohl eine Eot-Version als auch Ihre Originalversion verwenden müssen. Ich habe das Gefühl, dass der W3 Schools-Artikel einen Katalog der wichtigsten Informationen enthält, die Sie sich ansehen sollten.

Konvertierung in Miniatur-CSS

Dieses Thema wird häufig diskutiert, da es für jedes Projekt einen anderen Zweck hat. Einerseits verbringen Webentwickler viel Zeit damit, ihre Stylesheets zu schreiben. Es gibt keine Möglichkeit, diese Art von Klartextdaten zu verschlüsseln und sie vor Schnüffeln zu verbergen. Wenn Sie versuchen, andere davon abzuhalten, Ihren Code unverhohlen zu stehlen, können Sie am besten die Stile durcheinander bringen und alle Zeilenumbrüche / Leerzeichen entfernen.

Dieser Vorgang kann als bezeichnet werden Miniaturisierung dein Code. Im Allgemeinen schreiben Entwickler das CSS im Standardformat und entfernen dann alle Leerzeichen, bevor sie auf den Webserver hochgeladen werden. Dann haben Sie eine lokale Kopie, die Sie schnell bearbeiten können, während Sie eine kleinere Version des Live-Projekts zur Verfügung stellen. Diese Methode kann natürlich hilfreich sein, um das Laden von Seiten zu reduzieren und Code-Hijacker in Schach zu halten.

Der Link, den ich oben zu Minify CSS geführt habe, enthält ein hervorragendes Lesematerial zu diesem Thema. Die Website bietet auch ein browserbasiertes Tool zum Entfernen von Leerzeichen und Schlüsselrückgaben aus Ihrem Code. CSS Compressor ist eine weitere Option mit einer einfachen Benutzeroberfläche, die direkt in Ihrem Webbrowser ausgeführt wird. Ich habe auch gute Dinge über Clean CSS gehört, obwohl ich die App selbst nie benutzt habe.

ähnliche Links

Um Sie weiter voranzutreiben, habe ich sechs nützliche Links aus dem Web bereitgestellt. Dazu gehören nicht nur die Kurzschreibweise, sondern hilfreiche Leitfäden und Tutorials, auf die Sie zugreifen können, wenn Sie diesen neuen CSS-Kurzcode verwenden.

• Anfängerleitfaden zu CSS3
• CSS-Kurzanleitung
• Verwenden Sie CSS3 angemessen?
• CSS-Inhalte und Browserkompatibilität
• CSS3 + Progressive Enhancement = Intelligentes Design
• Vollständiger CSS / CSS3-Eigenschaftenindex

Fazit

Es erfordert viel Engagement und Übung, CSS-Code zu schreiben, um einen konkreten Zeitplan zu erstellen, den Sie für jedes Projekt befolgen können. Die meisten Webdesigner greifen gerne neue Projekte und Ideen auf, so dass Sie sicherlich die Zeit finden werden, um diese hilfreichen Codierungstipps zu üben. Kopieren Sie ein kleines Referenzblatt zu Ihrer eigenen Bequemlichkeit, falls Sie keine Spickzettel finden oder, schlimmer noch, Sie verlieren die Internetverbindung!

Kennen Sie andere nützliche CSS3-Eigenschaften oder Verknüpfungen? Wir würden gerne Ihre Gedanken und Ideen in den Diskussionskommentaren hören. Webentwickler drängen auf eine weitere Standardisierung innerhalb des W3C, und der Übergang wurde eindeutig einfacher. CSS3 bietet fantastische Vorteile. Wenn Sie die Kurzschreibcodierung beherrschen können, werden Ihre Dateigrößen niedrig gehalten und Copycats davon abgehalten, Ihren Code zu stehlen.