Wann und warum das Style-Tag außerhalb von CSS-Stylesheets verwendet werden sollte
Veröffentlicht: 2017-10-29Style-Tags sind ein ziemlich interessanter Teil der Webentwicklung. Ich meine, sie sind grundlegend und grundlegend für die Funktionsweise des aktuellen Webs, aber meistens entsteht das eigentliche Styling Ihrer Website durch den Import und die Verwendung zahlreicher CSS-Stylesheets für Themen, Plugins und den alltäglichen Look, den Ihre Besucher sehen.
Aber in den alten Tagen des Website-Erstellens konnten Sie Style-Tags im gesamten Körper der Website verwenden, und das wäre in Ordnung. Die meisten, wenn nicht sogar alle CSS für die Seite würden auf die Seite selbst gehen, und damals… funktionierte es gut. Heutzutage gibt es natürlich Probleme damit – wie die Seitenladegeschwindigkeit und die Ausführungsreihenfolge, und je ausgereiftere Webtechnologien wachsen, desto seltener möchten Sie Stil-Tags allein verwenden.
Es gibt jedoch Zeiten, in denen Sie sie verwenden möchten. Manchmal verbessern sie Ihren Workflow, während andere das Leben Ihrer Benutzer wirklich verbessern – zum Beispiel die mobile Optimierung oder die Aufmerksamkeit auf ein bestimmtes Element durch tolles Styling.
Typische Verwendung von Stylesheets
Auf fast jeder Website sehen Sie heute das Styling wie folgt implementiert:
<link rel='stylesheet' id='divi-style-css' href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />
Wenn Sie ein Elegant Themes-Mitglied sind, das Divi verwendet (sollten Sie es sein!), ruft das das vollständige Stylesheet auf, aus dem ich diesen Ausschnitt genommen habe:
/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
Theoretisch könnten Sie dies nun in einem Style-Tag im Header jeder Seite, die Sie schreiben, einfügen. Es würde definitiv funktionieren, aber das ist stinkende Codierung und überhaupt nicht das, wofür Style-Tags gut sind.
Stil-Tags, moderne Nutzung
Natürlich verfügt Ihre Website über solche CSS-Stylesheets. Sie werden sie benutzen. Sie haben custom.css und stylesheet.css und wahrscheinlich viel mehr als das. Sie haben genau herausgefunden, wie Ihre Website aussehen soll, und sind damit zufrieden.
Warum brauchen Sie also die Style-Tags?
Denn Stylesheets sind Big-Picture-Lösungen. Ein Style-Tag ist eine kleine Lösung.
Sheets kümmern sich um das größere Erscheinungsbild Ihrer Site, nicht um die kniffligen Einzelelemente und besonderen Highlights. Manchmal ist es mehr Arbeit, als es wert ist, ein einzelnes Stück Code in ein Stylesheet zu packen.
Dann werden Style-Tags wirklich nützlich. Manchmal müssen Sie auch ein einzelnes Element optimieren oder eine bestimmte Stilauswahl für bestimmte Geräte oder Anwendungsfälle treffen. Dann glänzen Style-Tags in der modernen Webentwicklung wirklich.
Eine einzelne Instanz eines Elements
Der Hauptgrund für die Verwendung von Style-Tags auf Ihrer Website ist wahrscheinlich, dass Sie es mit einem einzelnen, einmaligen Element auf Ihrer Seite zu tun haben. Es kann sehr mühsam sein (für sehr wenig oder gar keine Rendite), das Styling in eine externe CSS-Datei aufzunehmen, die an die ID dieses Elements angehängt ist. Was Sie jedoch tun können, ist, ein Style-Tag auf das Element zu werfen und mit Ihrem Tag fortzufahren.
Zum Beispiel, wenn Sie eine Sidebar Widget haben , die eine spezielle Schriftart benötigt, können Sie es in ein div legen, geben dem div eine CSS - ID und dann in Ihre Tabelle kopf etwas so einfaches wie {font-Familie gehören: „Exo“ , Arial, serifenlos;} , aber das ist eine Menge Ärger.
Die bessere Option wäre, dies einfach zu tun?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, du bist fertig und dieses Widget sticht jetzt heraus, weil es das einzige ist, das dieses besondere Styling bekommt. (Und ja, mir ist klar, dass die Verwendung einer neuen und anderen Schriftart wahrscheinlich mit dem Rest Ihres Designs kollidiert. Aber es ist ein Beispiel.)
Eine einfache Seite
Manchmal haben Sie eine sehr einfache, einmalige Seite auf Ihrer Website. Es kann sich um eine Splash-Seite oder eine Squeeze-Seite handeln. Sie müssen hier wahrscheinlich nur ein paar Anpassungen an Ihrem Styling vornehmen, aber Sie müssen sie auf diese Seite anwenden, und zwar nur auf diese Seite.
Sie können also das oft geschmähte !important- Tag zusammen mit style verwenden , um Dinge schneller und einfacher zu erledigen, als ein neues Stylesheet zu erstellen und zu verknüpfen. Diese Methode wird am besten verwendet, wenn Sie nicht viel neues CSS haben, da das Laden von Unmengen von CSS wie diesem das Laden der Seite verlangsamen kann. Aber das wusstest du schon.
So etwas Einfaches wäre jedoch keine allzu große Belastung für die Verbindungen Ihrer Benutzer und es lohnt sich nicht, es in ein Stylesheet aufzunehmen. (Und um fair zu sein, dieses CSS ist abscheulich und es lohnt sich nicht, einer Site hinzugefügt zu werden. Tee hee!)
<style>
h2, h3, h4 {
font-family: "Exo", Arial, sans-serif!important;
text-align: right;
font-size: 2rem;
color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important;
font-size: 1.2rem;
color: red;
background: #000;}
</style>
Der Punkt hier ist jedoch, dass HTML 5 cool ist, wenn Sie Style-Tags in den Kopf Ihrer Website einfügen, damit Sie die vorhandenen Stylesheets optimieren. Während die !important- Tags in diesem Fall definitiv nicht erforderlich sind (sie sind es selten), habe ich das Gefühl, dass dies vielleicht das einzige Mal ist, dass sie verwendet werden, weil sie nicht viele Tag-Spaghetti verursachen werden, wie Sie (oder andere Entwickler) beginnen mit der Arbeit an der Site, da sie nur für diese eine Seite gelten.
Mehrere Ansichtsfenstergrößen
Medienanfragen sind Ihr Freund. Wenn Sie mit ihnen nicht ganz vertraut sind, empfehle ich Ihnen dringend, sie zu lesen. Grundsätzlich können Sie angeben, welche Parameter erfüllt sein müssen, damit bestimmte CSS wirksam werden. Meistens verwenden Sie dies jedoch, um sicherzustellen, dass Ihre Websites auf verschiedenen Geräten funktionieren. Wenn Sie eine Site-weite Reaktionsfähigkeit benötigen, wird dies in einem Stylesheet festgehalten.
Aber auch hier, wenn Sie eine einzelne Seite oder ein einzelnes Element haben, das auf Mobilgeräten anders oder überhaupt nicht angezeigt werden soll (oder sogar in kleineren oder größeren Desktop-Auflösungen), können Sie dies mit Style-Tags in der Kopfzeile tun.
<style>
@media (max-width: 767px) {
.white_text {
color: #ffffff;
}
.blue_text {
color: #cbe1f3;
}
.white_background {
background-color: #ffffff;
}
.blue_background {
background-color: #003663;
}
#email_form_a {
display:none;
}
</style>
Stylen und Profilieren
CSS ist mittlerweile ein so wichtiger Bestandteil der Webentwicklung, dass es fast jeder kennen und verwenden muss. Und noch mehr als CSS zu wissen , ist zu wissen , wenn die nuancierte Tools verwenden Sie Zugriff haben.
Sie haben also nicht das Gefühl, auf Stylesheets beschränkt zu sein. Sicher, sie sind fantastisch und nützlich und machen das gesamte Web zu einem schöneren Ort, aber Sie können auch einfache Stil-Tags verwenden und Ihren Websites ein wenig mehr Pop verleihen.
Wie verwenden Sie also Style-Tags außerhalb Ihrer CSS-Stylesheets? Welche Erkenntnisse können Sie den Leuten geben?
Miniaturansicht des Artikels von Creative Thoughts / shutterstock.com