Menjaga Markup Kode CSS3 Anda Tetap Ramping
Pengembang web dapat menghemat banyak waktu menggunakan sintaksis CSS3 yang lebih canggih. Pengguna yang mengunjungi halaman Anda mengharapkan waktu pemuatan yang tercepat - yang membuatnya menjadi tanggung jawab Anda untuk memperkecil ukuran file. Ada banyak trik steno dengan CSS dan terutama di bawah model CSS3 baru.
Saya telah mengumpulkan beberapa gagasan ini dalam panduan di bawah ini. Kami juga harus menyentuh bidang lain seperti memperkecil kode CSS Anda. Ada alat di dalam peramban yang tersedia untuk membantu pengembang dalam proses penataan, tetapi Anda ingin menggabungkan kode pendek dengan pengurangan ukuran file ini untuk pada akhirnya merampingkan proses rendering situs web Anda.
Kiat Dasar Pemformatan
Sebelum kita beralih ke sintaks CSS yang sebenarnya, saya ingin membahas topik bagaimana untuk menulis CSS Anda. Jika Anda sedikit terbiasa dengan desain web, Anda mungkin pernah melihat lembar gaya sebelumnya, mungkin lebih dari sekali. Bagian pertama dari setiap perintah disebut pemilih. Ini menargetkan jenis elemen yang akan menerima gaya yang ditambahkan di dalam kurung kurawal, juga dikenal sebagai properti.
Level sebaris
Dengan gaya inline setiap properti ditulis satu demi satu dengan hanya spasi untuk memisahkannya. Metode ini paling baik diterapkan pada penyeleksi di mana Anda hanya perlu beberapa properti. Ini akan menghemat ruang Anda pada halaman dan menggulir melalui stylesheet Anda akan jauh lebih cepat. Jika Anda belum pernah menemukan CSS sebaris sebelumnya, saya telah menambahkan contoh kecil di bawah ini yang menargetkan tautan anchor HTML.
a color: # 648cc8; font-weight: bold; a: hover color: # 739cda; teks-dekorasi: tidak ada; a.alt color: # bd4949! important;
Tingkat Blok
Di sisi lain, properti gaya blok dimasukkan dalam satu baris per pasangan kunci / nilai dan sering diindentasi untuk pengeditan yang lebih cepat saat memindai kode. Sekitar 99% dari stylesheet pembersih yang saya gunakan menggunakan format ini, dan ini telah menjadi standar industri bagi banyak desainer. Jika pemilih Anda menggunakan lebih dari 6 atau 7 properti ini adalah pemformatan terbaik untuk diterapkan.
Ketika Anda mempertimbangkan banyak properti CSS3 baru, Anda juga menyadari betapa cepatnya lembar gaya Anda terisi. Dan banyak dari properti ini mendukung salinan browser-spesifik yang memerlukan entri kode hampir duplikat (seperti radius perbatasan). Anda dapat melihat contoh properti blok saya yang ditetapkan di bawah ini dengan menargetkan div pembungkus sampel.
.wrap display: block; padding: 6px 10px; latar belakang: #FFF; batas-jari-jari: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
Baik cara menulis CSS secara khusus lebih baik daripada yang lain. Pada akhirnya itu adalah pilihan Anda sebagai pengembang yang gaya yang Anda sukai, dan bahkan ini akan sesuai dengan proyek yang Anda kerjakan. Itu bahkan umum untuk menemukan CSS di mana desainer telah menggabungkan keduanya! Saya pribadi merasakannya “sedang dalam proses” cenderung lebih mudah dengan gaya blok karena saya terus-menerus memeriksa stylesheet untuk mengedit atau menambah. Tetapi untuk domain yang padat lalu lintas, memperkecil file CSS Anda adalah cara terbaik yang harus dilakukan.
Menjaga Mereka Tetap Langsing
Dengan memanfaatkan banyak kode pendek yang tersedia di CSS3, Anda dapat menghemat banyak waktu pengembangan. Mengedit elemen HTML akan menjadi jauh lebih mudah karena Anda memahami istilah yang menghemat waktu ini. Selain itu kode Anda akan terlihat lebih rapi dan lebih mudah dilihat.
Satu-satunya downside adalah bahwa tidak semua browser sepenuhnya mendukung properti ini. Ada solusi untuk banyak masalah yang ada seperti di Internet Explorer dan Netscape. Untungnya, Web selalu maju dan seiring meningkatnya popularitas CSS3, kami juga akan mengalami peningkatan kompatibilitas browser..
Transparansi Warna RGBa / Opacity
Nilai RGB baru bukan CSS3 milik, tapi transparansi alpha hanya khusus untuk CSS3. Alih-alih nilai umum "Merah Hijau Biru" yang Anda berikan untuk warna, Anda mungkin sekarang termasuk opsi keempat transparansi warna. Karena itu, pengembang web hampir seluruhnya dilakukan dengan PNG transparan.
Sintaks dasar membutuhkan nilai 0-255 dalam tiga (3) slot pertama dan 0-1,0 pada posisi alfa. Rentang warna spesifik untuk berapa banyak setiap rona (RGB) terlihat dengan 0 menjadi nol dan 255 penuh.
/ ** sintaksis ** / latar belakang: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** contoh ** / div background: rgba (255, 255, 255, 0.3);
Kompatibilitas lintas browser
Properti lain kegelapan dapat digunakan dalam beberapa keadaan. Namun ini akan memengaruhi seluruh elemen HTML dan konten dalam, bukan hanya latar belakang seperti yang Anda lihat dalam contoh saya.
Sayangnya Internet Explorer belum mendukung nilai warna RGBa. Anda biasanya harus menyertakan properti cadangan dengan opacity penuh untuk browser yang kurang standar ini. Anda mengatur ini dengan nilai yang sama tetapi tidak termasuk 4 (opacity). Itu akan terlihat seperti rgba (255, 255, 255)
Selain itu Internet Explorer dapat ditangani sedikit lebih anggun melalui persyaratan. Anda benar-benar dapat memeriksa apakah browser menjalankan IE dan menampilkan filter Microsoft CSS eksklusif pada perintah. Saya telah menunjukkan ini dalam contoh saya di bawah ini (perhatikan ini akan muncul di suatu tempat di file HTML Anda):
CSS3 Border Radius
Saya telah membaca beberapa utas forum yang membingungkan tentang cara membuat batas bundar dengan CSS3 - tidak banyak pada sisi bagaimana hal itu dilakukan, tetapi dengan dukungan browser yang rewel, pengembang web mencari kode termudah untuk masuk dan berfungsi seperti yang diharapkan.
/ ** sintaksis ** / batas-jari-jari: kiri-atas-kanan bawah-kanan-kiri;
Itu batas-jari-jari properti berbagi sintaksis yang sama dengan membuat perbatasan standar, kecuali dalam hal ini kami menargetkan sudut kotak. Properti ini akan benar-benar menerima 1 - 4 nilai dan masing-masing menargetkan pengaturan sudut yang berbeda.
- 1 nilai: Keempat sudut dibulatkan ke nilai yang sama
- 2 nilai: Nilai pertama berlaku untuk
kiri atasdankanan bawahsementara nilai kedua hitkanan atasdankiri bawah - 3 nilai: Pertama berlaku untuk
kiri atassudut, yang kedua adalah keduanyakiri bawah&kanan atassedangkan nilai ke-3 dan terakhir diterapkan kekanan bawah - 4 nilai: Semua 4 nilai target sudut dalam urutan berikut: kiri atas, kanan atas, kanan bawah, kiri bawah
/ ** contoh ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Jadi dalam kode di atas kita gunakan batas-jari-jari untuk menerapkan efek bulat 4px pada semuanya kecuali kanan bawah perbatasan yang mendapat kurva dihaluskan 8px. Jika Anda perhatikan, kedua kode ini akan benar-benar menerapkan efek gaya yang sama.
Kompatibilitas lintas browser
Sekarang masalah utamanya adalah itu batas-jari-jari hanya didukung dalam beberapa browser. Internet Explorer 9 baru-baru ini menambahkan dukungan yang hebat dan Opera akan membuat ini juga. Namun bahkan Opera telah membuat propertinya sendiri -o-border-radius menargetkan mesin browser khusus mereka. Selain itu -moz-border-radius didukung oleh perangkat lunak Firefox / Gecko dan -webkit-border-radius untuk Google Chrome / Safari.
Kode di bawah ini adalah contoh template tanpa tulang saya untuk membuat sudut bulat dengan dukungan browser global terbesar.
div border-radius: 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;
Bayangkan Drop Shadow?
Aspek lain yang benar-benar hebat dari CSS3 adalah dukungan untuk kotak dan bayangan teks. Ini telah menjadi masalah bagi pengembang di masa lalu karena gambar latar belakang adalah satu-satunya pilihan yang realistis. Sintaks ini sebenarnya mengikuti peran steno yang jauh lebih mudah daripada properti lain yang telah kita bahas. Sulit untuk mengingat urutan nilai-nilai kunci yang tepat pada awalnya - tetapi semakin banyak praktik yang Anda lakukan, semakin mudah jadinya.
Sayangnya Internet Explorer sekali lagi yang aneh. Setiap peramban utama lainnya termasuk Firefox, Google Chrome, Safari dan Opera mendukung sepenuhnya bayangan teks milik. Pengembang telah mencoba membangun dukungan IE mereka sendiri tetapi masih sangat terbatas. Sintaks dasarnya ditulis sebagai berikut:
/ ** sintaksis ** / text-shadow: x-offset y-offset warna blur-radius; / ** contoh ** / div text-shadow: 2px 2px 1px # 111;
Offset X dan Y memberi tahu browser seberapa jauh dari kanan dan rendah bayangan yang akan muncul. Anda dapat menggunakan nilai negatif untuk masing-masing memposisikan bayangan di atas dan di kiri. Tapi ini terlihat sangat canggung jadi saya merekomendasikan bilangan bulat positif. Juga nilai blur-radius dapat digunakan untuk memuluskan tepi yang kaku, jika bayangan teks tampak tidak alami.
Sintaks ini hanya melihat ke notasi dasar ketika membuat efek drop shadow tunggal. Desainer yang sangat maju telah belajar untuk bahkan membuat banyak bayangan secara bersamaan! Saya mereferensikan posting blog yang luar biasa ini dari belakang pada bulan April 2011 yang sangat detail tentang memaksakan bayangan teks. Jika Anda punya waktu, baca konten hanya untuk mendapatkan gambaran tentang fitur yang lebih canggih, dan pastikan untuk menandainya sebagai referensi di masa mendatang.!
Kompatibilitas lintas browser
Penentang terbesar yang kami temui adalah Internet Explorer. Berkali-kali Microsoft telah mendorong keluar mesin rendering peramban mereka sendiri yang memiliki kinerja terbaik. Sekarang bahkan dengan CSS3 mengambil pemerintahan di bayangan teks, IE masih tertinggal. Ada situs web demo yang hebat di mana Anda dapat menemukan contoh kode dan komentar bersyarat tradisional CSS.
Pada dasarnya Anda ingin memeriksa apakah browser yang dijalankan pengguna cocok dengan Internet Explorer 9 versi apa pun atau di bawahnya. Kemudian menggunakan filter MS kita bisa menerapkan bayangan ke elemen teks apa pun (di atas, kita menggunakan paragraf).
Mempermudah Transisi
CSS3 transisi adalah properti terpanas di pasar desain sejak flapjacks nenek! Desainer web telah membuat keributan tentang transisi CSS murni, meskipun dukungan terutama terbatas pada browser Webkit. Anda tentu saja dapat menggunakan properti sekunder untuk Mozilla dan Opera dan semacamnya. Tetapi notasi steno benar-benar menawan, terutama jika Anda menentang animasi JavaScript untuk alasan apa pun.
Pertama mari kita lihat properti transisi yang asli. Ini akan membutuhkan 4 nilai yang Anda juga bisa memecahnya menjadi properti sendiri. Mereka sesuai dengan transisi milik(apa efeknya), lamanya(berapa lama untuk menariknya), fungsi waktu(perubahan kecepatan dari animasi), dan menunda(jumlah detik untuk menunggu sebelum menghidupkan).
/ ** sintaksis ** / transisi: properti-waktu tunda fungsi penundaan; / ** contoh ** / img properti transisi: opacity; durasi transisi: 2s; transisi-timing-fungsi: kemudahan-dalam; transisi-delay: 0,5s;
Anda harus secara intuitif memahami tujuan sebagian besar properti ini kecuali kemungkinan fungsi waktu. Meskipun membingungkan pada awalnya, properti ini hanya menjiwai transisi Anda secara berbeda sehingga efeknya akan mulai lebih lambat, lebih lambat, atau yang serupa.
W3 Schools memiliki doc fungsi waktu online yang mencantumkan semua nilai yang mungkin Anda coba. Saya selalu menemukan diri saya mencari di Google untuk panduan ini, tetapi mereka membuat bookmark yang sangat berguna.
Kompatibilitas lintas browser
Sekarang mari kita mainkan dukungan browser penuh. Secara default properti transisi adalah hanya didukung oleh versi Safari yang lebih baru. Namun banyak pengguna masih membutuhkan -webkit awalan yang juga berlaku untuk Google Chrome dan mesin rendering serupa. Di bawah ini adalah a “selesai” template blok kode saya sarankan menyimpan dan menggunakan jika Anda memerlukan dukungan transisi dari sebagian besar browser web.
img transisi: opacity 2s easy-in 1s; -webkit-transition: opacity 2s easy-in 1s; / * chrome, safari, flock * / -moz-transition: opacity 2s easy-in 1s; / * mozilla + tokek * / -o-transisi: opacity 2s easy-in 1s; / * opera * /
Efek Teks-stroke
Properti ini tidak besar dan Anda tidak akan menemukan banyak perancang web menggunakannya hari ini. Tapi Anda bisa menggunakannya teks-stroke untuk membangun beberapa efek yang sangat rapi dengan font Anda. Browser Webkit seperti Safari dan Chrome adalah satu-satunya pendukung sebenarnya dari properti ini sejauh ini. Opera dan Firefox mengalami kesulitan rendering objek teks dengan garis besar yang sama.
/ ** sintaksis ** / p -webkit-text-stroke: width color; / ** contoh ** / p -webkit-text-stroke: 1px # 222;
Kompatibilitas lintas browser
Jika Anda merasa perlu untuk efek stroke teks, Anda harus selalu menyertakan warna cadangan. Mozilla dan Opera dapat bertahan, namun pengguna Internet Explorer tidak memiliki pilihan lain. Sayangnya ini adalah salah satu properti CSS3 yang lebih baru yang belum mendapatkan cukup dukungan dari komunitas pengembang browser web. Anda harus meluangkan waktu bermain-main dengan alat web luar biasa ini yang khusus dibuat untuk membangun garis besar teks CSS3 ini.
Ukuran kotak
Properti ukuran kotak memberi Anda kontrol lebih besar atas lebar / tinggi total elemen blok apa pun. Secara default lebar / tinggi + batas + margin + bantalan membentuk ukuran total kotak. Namun menggunakan kotak batas pada konten Anda mendorong semua padding dan margin Anda batin untuk menjaga lebarnya persis sama. Hanya ada dua nilai untuk properti ini, dengan kotak konten menjadi default.
div width: 550px; padding: 9px; ukuran kotak: kotak batas; / * Lebar akan tetap di 550px * /
Seperti yang dapat Anda bayangkan, ini akan berguna di beberapa titik selama karir CSS Anda. Padding dan margin bisa sangat menyulitkan dan ketika Anda menambahkan batas Anda cenderung kehilangan jejak piksel.
Kompatibilitas lintas browser
Opera dan IE 8 mendukung properti baru ini secara default. IE7 dan di bawah ini macet dengan penyiapan kotak konten kecuali jika pengunjung Anda menggunakan mode quirks. Satu-satunya tambahan yang harus Anda ketahui tentang secara spesifik menargetkan webkit dan mesin peramban yang didukung Mozilla.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / ukuran kotak: kotak batas; / * Opera / IE8 + * /
Kolom CSS3 murni
Kolom agak rumit dengan CSS3 tetapi dapat dilakukan dengan kode minimal. 2 properti yang ingin Anda fokuskan adalah hitungan kolom dan celah kolom. Hitungan referensi jumlah total kolom yang ingin Anda terapkan sementara kesenjangan menciptakan margin antara masing-masing.
div # cols kolom-hitung: 3; gap-kolom: 10px;
Dalam contoh saya, kita dapat melihat ID # cols digunakan sebagai wadah. Di dalam kami membagi div menjadi 3 kolom dengan kesenjangan 10px antara masing-masing. Selanjutnya Anda bisa mengatur lebar kolom yang digunakan untuk mengatur lebar total masing-masing kolom alih-alih daftar angka yang solid.
Kompatibilitas lintas browser
Apa pun sebelum IE8 tidak akan dapat menggunakan properti ini. Tetapi seperti yang telah kita lihat dalam setiap contoh, Mozilla dan Webkit menawarkan solusi mereka sendiri untuk banyak browser. Jika Anda memerlukan templat, periksa kode contoh kecil saya di bawah ini:
div # sidebar width: 210px; -moz-kolom-hitung: 3; -moz-kolom-gap: 7px; -webkit-kolom-count: 3; -webkit-kolom-gap: 7px; jumlah kolom: 3; gap-kolom: 7px;
Kustom @ font-wajah
Anda pasti sudah mendengar tentang kegembiraan terkait font khusus CSS3. Baik menggunakan properti @ font-face kita dapat mengimpor gaya font eksternal dan menggunakannya seperti keluarga lainnya. Sintaksnya agak berbelit-belit dan Anda harus meluangkan waktu untuk memperbaikinya. Blok untuk @ font-face digunakan untuk mendefinisikan nama keluarga, setelah itu Anda dapat menggunakan ini di font-keluarga properti dimanapun!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Hanya Internet Explorer * / Jadi Anda lihat di atas saya tidak menargetkan jenis font tertentu, tetapi sintaks yang menonjol. Perhatikan bahwa Internet Explorer hanya mendukung .eot jenis font, sementara .ttf dan .otf adalah opsi populer untuk browser lain. Juga penting, Anda harus memahami bahwa Anda dapat mengirimkan URL font dari tautan langsung, yaitu. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Tidak ada masalah lintas browser nyata dengan pengaturan ini karena semua mesin rendering dapat menguraikan jenis file font ini. Ingatlah bahwa untuk dukungan IE Anda harus menyertakan versi eot dan juga yang asli. Saya merasa bahwa artikel Sekolah W3 memiliki katalog informasi paling penting yang harus Anda periksa.
Konversi ke Miniatur CSS
Topik ini sering diperdebatkan karena melayani tujuan yang berbeda untuk setiap proyek. Di satu sisi, pengembang web menghabiskan banyak waktu untuk menulis lembar gaya mereka. Tidak ada cara untuk mengenkripsi tipe data plaintext ini dan menyembunyikannya dari pengintaian. Jika Anda berusaha mencegah orang lain mencuri kode Anda secara terang-terangan, hal terbaik yang dapat Anda lakukan adalah mengacaukan gaya dan menghapus semua jeda baris / spasi.
Proses ini dapat diberi label sebagai miniaturisasi kode Anda. Umumnya pengembang akan menulis CSS dalam format standar dan kemudian menghapus semua spasi putih sebelum mengunggah ke server web. Kemudian Anda memiliki salinan lokal untuk diedit dengan cepat sambil juga menyediakan versi yang lebih kecil pada proyek langsung. Metode ini jelas dapat bermanfaat untuk mengurangi beban halaman dan menjaga pembajak kode.
Tautan yang saya posting di atas mengarah ke Minify CSS memiliki beberapa bahan bacaan hebat tentang subjek ini. Situs ini juga menyediakan alat berbasis browser untuk menghapus spasi putih dan pengembalian kunci dari kode Anda. CSS Compressor adalah pilihan lain menggunakan antarmuka sederhana yang berjalan langsung di dalam browser web Anda. Saya juga pernah mendengar hal-hal baik tentang Bersihkan CSS, meskipun saya sendiri belum pernah menggunakan aplikasi ini.
tautan yang berhubungan
Agar Anda terus maju, saya telah menyediakan enam tautan berguna dari seluruh Web. Ini termasuk tidak hanya notasi steno tetapi juga panduan dan tutorial yang bermanfaat untuk diakses ketika mempraktikkan kode CSS steno baru ini.
- Panduan Pemula untuk CSS3
- Panduan Singkat CSS
- Apakah Anda Menggunakan CSS3 Dengan Tepat?
- Konten CSS dan bagan kompatibilitas browser
- CSS3 + Progressive Enhancement = Desain Cerdas
- Indeks Properti CSS / CSS3 Lengkap
Kesimpulan
Dibutuhkan banyak dedikasi dan latihan menulis kode CSS untuk membangun jadwal konkret yang dapat Anda ikuti untuk setiap proyek. Sebagian besar perancang web senang untuk mengambil proyek dan ide baru, jadi Anda pasti akan menemukan waktu untuk mempraktikkan tips pengkodean yang bermanfaat ini. Cobalah menyalin lembar referensi kecil untuk kenyamanan Anda sendiri jika Anda tidak dapat menemukan cheat-sheet, atau lebih buruk lagi Anda kehilangan koneksi internet!
Apakah Anda tahu ada properti atau cara pintas CSS3 lainnya? Kami akan senang mendengar pemikiran dan ide Anda dalam komentar diskusi. Pengembang web mendorong untuk lebih banyak standardisasi dalam W3C dan jelas transisi telah semakin mudah. CSS3 memberikan manfaat yang luar biasa dan jika Anda dapat menguasai pengkodean steno, ini akan membuat ukuran file Anda rendah dan mencegah peniru mencuri kode Anda.
