Kiedy i dlaczego używać tagu stylu poza arkuszami stylów CSS

Opublikowany: 2017-10-29

Tagi stylu są dość interesującą częścią tworzenia stron internetowych. Chodzi mi o to, że są one fundamentalne i podstawowe dla tego, jak działa bieżąca sieć, ale przez większość czasu rzeczywista stylizacja Twojej witryny pochodzi z importowania i używania wielu arkuszy stylów CSS dla motywów, wtyczek i codziennego wyglądu, który widzą Twoi użytkownicy.

Ale w dawnych czasach tworzenia witryn można było używać tagów stylu w samej treści witryny i byłoby to w porządku. Większość, jeśli nie całość, CSS strony trafiałaby na samą stronę, a wtedy… działała dobrze. W dzisiejszych czasach są z tym oczywiście problemy – takie jak szybkość ładowania strony i polecenia wykonania, a im bardziej dojrzałe technologie internetowe rozwijają się, tym rzadziej chcesz używać tagów stylu przez ich samotność.

Są jednak chwile, kiedy chciałbyś ich użyć. Czasami poprawiają przepływ pracy, podczas gdy inne naprawdę poprawiają jakość życia użytkowników – na przykład optymalizacja mobilna lub przyciągnięcie ich uwagi do określonego elementu poprzez niesamowitą stylizację.

Typowe zastosowanie arkusza stylów

W prawie każdej witrynie internetowej zobaczysz zaimplementowaną stylizację w następujący sposób:

<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' />

Jeśli jesteś członkiem Elegant Themes, który używa Divi (powinieneś!), to wywoła pełny arkusz stylów, z którego wziąłem ten fragment:

/*
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;
}

Teraz, w teorii, które można umieścić w znaczniku style w nagłówku każdej strony piszesz. To na pewno zadziała, ale to śmierdzące kodowanie i wcale nie do czego nadają się tagi stylu.

Tagi stylu, nowoczesne zastosowanie

Oczywiście Twoja witryna ma takie arkusze stylów CSS. Użyjesz ich. Masz custom.css i stylesheet.css i prawdopodobnie o wiele więcej. Dokładnie wiesz, jak powinna wyglądać Twoja witryna, i jesteś z niej zadowolony.

Dlaczego więc potrzebujesz tagów stylu?

Ponieważ arkusze stylów to kompleksowe rozwiązania. Znacznik stylu to rozwiązanie na małą skalę.

Arkusze radzą sobie z lepszym wyglądem Twojej witryny, a nie z drobiazgowymi pojedynczymi elementami i specjalnymi wyróżnieniami. Czasami więcej pracy niż warto wrzucić jednorazowy fragment kodu do arkusza stylów.

Właśnie wtedy tagi stylu stają się naprawdę przydatne. Ponadto czasami trzeba dostosować pojedynczy element lub dokonać określonego wyboru stylu dla określonych urządzeń lub przypadków użycia. To właśnie wtedy tagi stylu naprawdę błyszczą we współczesnym tworzeniu stron internetowych.

Pojedyncza instancja elementu

Prawdopodobnie głównym powodem używania tagów stylu w witrynie jest to, że masz do czynienia z pojedynczym, jednorazowym elementem na swojej stronie. Umieszczenie stylizacji w zewnętrznym pliku CSS dołączonym do identyfikatora tego elementu może być bardzo kłopotliwe (z bardzo niewielkim, jeśli w ogóle, zwrotem). Możesz jednak dodać tag stylu do elementu i kontynuować dzień.

Na przykład, jeśli masz widżet paska bocznego, który wymaga specjalnej czcionki, można umieścić go w div, dać div id CSS, a następnie udać się do arkusza kalkulacyjnego zawierać coś tak prostego jak {font-family: „Exo” , Arial, sans-serif;} , ale to sporo kłopotów.

Lepszą opcją byłoby po prostu to zrobić?

<div style="font-family: "Exo", Arial, sans-serif;" />

Bada-bing, bada-boom, gotowe, a ten widget wyróżnia się teraz, ponieważ jest jedynym, który ma tę szczególną stylizację. (I tak, zdaję sobie sprawę, że użycie nowej i innej czcionki prawdopodobnie koliduje z resztą twojego projektu. Ale to przykład.)

Jedna prosta strona

Czasami masz w swojej witrynie bardzo prostą, jednorazową stronę. Może to być strona powitalna lub strona ściskana. Prawdopodobnie potrzebujesz tylko kilku poprawek do swojej stylizacji tutaj, ale potrzebujesz ich do zastosowania na tej stronie i tylko na tej stronie.

Możesz więc użyć często złośliwego tagu !important wraz ze stylem, aby szybciej i łatwiej wykonywać zadania niż tworzenie nowego arkusza stylów i łączenie go. Ta metoda jest najlepsza, jeśli nie masz dużo nowego CSS, ponieważ ładowanie mnóstwa CSS w ten sposób może spowolnić ładowanie strony. Ale to już wiedziałeś.

Coś takiego jak to nie byłoby jednak zbyt dużym obciążeniem dla połączeń użytkowników i nie warto go dodawać do arkusza stylów. (A żeby być uczciwym, ten CSS jest ohydny i nie warto go dodawać do żadnej strony. 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>

Chodzi jednak o to, że HTML 5 jest fajny, gdy dodajesz tagi stylu do nagłówka swojej witryny, aby dostosować istniejące arkusze stylów. Chociaż tagi !ważne zdecydowanie nie są wymagane w tym przypadku (rzadko są), wydaje mi się, że być może jest to jedyny raz, aby ich użyć, ponieważ nie spowodują one zbyt wielu tagów spaghetti jak ty (lub inni deweloperzy) zaczynają pracować nad stroną, ponieważ dotyczą tylko tej jednej strony.

Wiele rozmiarów rzutni

Zapytania medialne są twoim przyjacielem. Jeśli nie jesteś z nimi całkowicie zaznajomiony, gorąco sugeruję, abyś je przeczytał. Zasadniczo możesz zadeklarować, jakie parametry muszą zostać spełnione, aby dany CSS zaczął działać. Przeważnie jednak użyjesz tego, aby upewnić się, że Twoje witryny działają na różnych urządzeniach. Kiedy potrzebujesz responsywności w całej witrynie, zostanie to umieszczone w arkuszu stylów.

Ale znowu, jeśli masz pojedynczą stronę lub element, który musi wyglądać inaczej lub wcale na urządzeniach mobilnych (lub nawet mniejszych lub większych rozdzielczościach komputerów), możesz to zrobić za pomocą tagów stylu w nagłówku.

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

Stylizacja i profilowanie

CSS jest teraz tak ważną częścią tworzenia stron internetowych, że prawie każdy musi go znać i używać. A nawet więcej niż wiedza o CSS to wiedza, kiedy korzystać z dopracowanych narzędzi, do których masz dostęp.

Więc nie myśl, że jesteś ograniczony do arkuszy stylów. Jasne, są fantastyczne i przydatne, i sprawiają, że cała sieć jest przyjemniejsza, ale nadal możesz korzystać z prostych tagów stylu i nadać swoim witrynom trochę dodatkowego charakteru.

Jak więc używać tagów stylów poza arkuszami stylów .css? Jakie spostrzeżenia możesz dać ludziom?

Obraz miniatury artykułu autorstwa Creative Thoughts / shutterstock.com