Kapan dan Mengapa Menggunakan Tag Gaya Di Luar CSS Stylesheets

Diterbitkan: 2017-10-29

Tag gaya adalah bagian yang cukup menarik dari pengembangan web. Maksud saya, mereka mendasar dan mendasar untuk cara kerja web saat ini, tetapi sebagian besar waktu, gaya situs Anda yang sebenarnya berasal dari mengimpor dan menggunakan banyak lembar gaya CSS untuk tema, plugin, dan tampilan sehari-hari yang dilihat pengunjung Anda.

Tetapi di masa lalu pembuatan situs web, Anda dapat menggunakan tag gaya di bagian paling dalam situs web, dan itu akan baik-baik saja. Sebagian besar, jika tidak semua, CSS untuk halaman akan masuk ke halaman itu sendiri, dan saat itu… itu berfungsi dengan baik. Saat ini, ada masalah dengan itu, tentu saja-seperti kecepatan memuat halaman dan perintah eksekusi, dan semakin berkembangnya teknologi web, semakin jarang Anda ingin menggunakan tag gaya semuanya sendirian.

Namun, ada kalanya Anda ingin menggunakannya. Terkadang, mereka meningkatkan alur kerja Anda, sementara contoh lain benar-benar membuat hidup pengguna Anda lebih baik–pengoptimalan seluler, misalnya, atau menarik perhatian mereka ke elemen tertentu melalui gaya yang mengagumkan.

Penggunaan Stylesheet Khas

Di hampir setiap situs web saat ini, Anda akan melihat gaya diterapkan seperti ini:

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

Jika Anda adalah anggota Elegant Themes yang menggunakan Divi (seharusnya!), yang memanggil stylesheet lengkap yang saya ambil cuplikan ini dari:

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

Sekarang, secara teori, Anda dapat memasukkannya ke dalam tag gaya di header halaman mana pun yang Anda tulis. Itu pasti akan berhasil, tetapi itu adalah pengkodean yang bau dan sama sekali tidak cocok untuk tag gaya apa.

Tag Gaya, Penggunaan Modern

Tentu saja situs web Anda memiliki stylesheet CSS seperti itu. Anda akan menggunakannya. Anda memiliki custom.css dan stylesheet.css dan mungkin lebih dari itu. Anda telah mengetahui dengan tepat seperti apa tampilan situs Anda, dan Anda senang dengan itu.

Jadi mengapa Anda membutuhkan tag gaya?

Karena stylesheet adalah solusi gambaran besar. Tag gaya adalah solusi skala kecil.

Spreadsheet menangani tampilan situs Anda yang lebih besar, bukan elemen individual seluk beluk dan sorotan khusus. Terkadang, lebih banyak pekerjaan daripada membuang sepotong kode ke dalam stylesheet.

Saat itulah tag gaya benar-benar menjadi berguna. Selain itu, terkadang Anda perlu mengubah satu elemen atau membuat pilihan gaya tertentu untuk perangkat atau kasus penggunaan tertentu. Saat itulah tag gaya benar-benar bersinar dalam pengembangan web modern.

Sebuah Instance Tunggal dari sebuah Elemen

Mungkin alasan utama Anda menggunakan tag gaya di situs Anda adalah jika Anda berurusan dengan satu elemen tunggal di halaman Anda. Ini bisa sangat merepotkan (untuk pengembalian yang sangat sedikit, jika ada) untuk memasukkan gaya dalam file CSS eksternal yang dilampirkan ke id elemen itu. Apa yang dapat Anda lakukan, bagaimanapun, adalah melemparkan tag gaya ke elemen dan melanjutkan hari Anda.

Misalnya, jika Anda memiliki widget bilah sisi yang memerlukan font khusus, Anda dapat memasukkannya ke dalam div, memberikan div id CSS, lalu menuju ke spreadsheet Anda untuk memasukkan sesuatu yang sederhana seperti {font-family: “Exo” , Arial, sans-serif;} , tapi itu banyak masalah.

Pilihan yang lebih baik, apakah hanya melakukan ini?

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

Bada-bing, bada-boom, Anda sudah selesai dan widget itu sekarang menonjol karena itu satu-satunya yang mendapatkan gaya khusus itu. (Dan ya, saya menyadari bahwa menggunakan font baru dan berbeda kemungkinan akan berbenturan dengan sisa desain Anda. Tapi ini adalah sebuah contoh.)

Satu Halaman Sederhana

Terkadang, Anda memiliki halaman satu kali yang sangat sederhana di situs Anda. Ini mungkin halaman splash atau halaman pemerasan. Anda mungkin hanya memerlukan beberapa penyesuaian untuk gaya Anda di sini, tetapi Anda memerlukannya untuk diterapkan ke halaman ini, dan halaman ini saja.

Jadi Anda dapat menggunakan tag !important yang sering difitnah bersama dengan gaya untuk menyelesaikan sesuatu dengan lebih cepat dan lebih mudah daripada membuat lembar gaya baru dan menautkannya. Metode ini paling baik digunakan jika Anda tidak memiliki banyak CSS baru karena memuat banyak sekali CSS seperti ini dapat memperlambat pemuatan halaman. Tapi Anda sudah tahu itu.

Namun, sesuatu yang sederhana seperti ini tidak akan terlalu membebani koneksi pengguna Anda, dan sejujurnya tidak layak ditambahkan ke dalam stylesheet. (Dan sejujurnya, CSS ini mengerikan dan tidak layak ditambahkan ke situs mana pun. 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>

Intinya di sini, bagaimanapun, adalah bahwa HTML 5 keren dengan Anda menambahkan tag gaya ke kepala situs web Anda sehingga Anda mengubah stylesheet yang ada. Meskipun tag !important jelas tidak diperlukan dalam contoh ini (jarang ada), saya merasa ini mungkin satu-satunya saat untuk menggunakannya karena mereka tidak akan menyebabkan banyak tag spaghetti seperti Anda (atau pengembang lain) mulai bekerja di situs karena hanya berlaku untuk satu halaman ini.

Beberapa Ukuran Viewport

Kueri media adalah teman Anda. Jika Anda tidak sepenuhnya akrab dengan mereka, maka saya sangat menyarankan Anda membaca tentang mereka. Pada dasarnya, Anda dapat mendeklarasikan parameter apa yang harus dipenuhi agar CSS tertentu dapat diterapkan. Namun, sebagian besar, Anda akan menggunakan ini untuk memastikan situs Anda berfungsi di perangkat yang berbeda. Saat Anda membutuhkan respons di seluruh situs, itu akan masuk dalam stylesheet.

Tetapi sekali lagi, jika Anda memiliki satu halaman atau elemen yang Anda perlukan untuk tampil berbeda atau tidak sama sekali di seluler (atau bahkan resolusi desktop yang lebih kecil atau lebih besar), Anda dapat melakukannya dengan tag gaya di header.

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

Gaya dan Profilin

CSS adalah bagian utama dari pengembangan web sekarang bahwa itu adalah sesuatu yang hampir semua orang harus tahu dan gunakan. Dan bahkan lebih dari mengetahui CSS adalah mengetahui kapan harus menggunakan alat bernuansa yang dapat Anda akses.

Jadi jangan merasa seolah-olah Anda terbatas pada stylesheet. Tentu, mereka fantastis dan berguna, dan mereka membuat seluruh web menjadi tempat yang lebih baik, tetapi Anda masih bisa menggunakan tag gaya sederhana juga, dan memberi situs Anda sedikit tambahan.

Jadi, bagaimana Anda menggunakan tag gaya di luar lembar gaya .css Anda? Wawasan apa yang bisa Anda berikan kepada orang-orang?

Gambar thumbnail artikel oleh Creative Thoughts / shutterstock.com