Menyimpan Kod CSS3 Anda Markup Slim
Pemaju web boleh menyimpan banyak masa menggunakan sintaks CSS3 yang lebih canggih. Pengguna yang melawat halaman anda menjangkakan masa beban yang paling pantas - yang menjadikan tanggungjawab anda untuk menyimpan saiz fail. Terdapat banyak helah tersendiri dengan CSS dan terutama di bawah model CSS3 baru.
Saya telah mengumpulkan beberapa idea ini dalam panduan di bawah. Kami juga harus menyentuh bidang lain seperti meminimumkan kod CSS anda. Terdapat alat penyemak imbas yang tersedia untuk membantu pemaju dalam proses penggayaan tetapi anda ingin menggabungkan kod pendek dengan pengurangan saiz fail ini untuk akhirnya menyelaraskan proses rendering laman web anda.
Petua Asas Pemformatan
Sebelum kita melompat ke dalam sintaks CSS sebenar saya mahu meneruskan topik bagaimana untuk menulis CSS anda. Jika anda sedikit biasa dengan reka bentuk web, anda mungkin melihat lembaran gaya sebelum ini, mungkin lebih daripada sekali. Bahagian pertama setiap arahan dipanggil pemilih. Ini mensasarkan jenis elemen yang akan menerima gaya ditambah di dalam pendakap kerinting, yang juga dikenali sebagai hartanah.
Tahap Inline
Dengan gaya sebaris setiap harta ditulis satu demi satu dengan hanya ruang untuk memisahkannya. Kaedah ini lebih baik digunakan pada pemilih di mana anda hanya memerlukan beberapa sifat. Ia akan menjimatkan ruang pada halaman dan menatal melalui lembaran gaya anda akan menjadi lebih cepat. Sekiranya anda tidak pernah mengalami CSS sebaris sebelum ini, saya telah menambah contoh kecil di bawah yang menyasarkan pautan jangkau HTML.
a color: # 648cc8; font-weight: bold; a: hover color: # 739cda; teks-hiasan: tiada; a.alt color: # bd4949! important;
Tahap Blok
Sebaliknya sifat-sifat gaya blok dimasukkan dalam satu baris bagi pasangan / pasangan nilai dan sering diandaikan untuk mengedit lebih cepat ketika mengimbas kod. Sekitar 99% daripada stylesheet bersih saya menggunakan format ini, dan ia telah menjadi standard industri untuk banyak pereka. Jika pemilih anda menggunakan lebih daripada 6 atau 7 sifat ini adalah format yang terbaik untuk digunakan.
Apabila anda mengambil kira banyak sifat CSS3 baru, anda juga menyedari betapa cepatnya stylesheet anda diisi. Dan banyak sifat ini menyokong salinan khusus penyemak imbas yang memerlukan entri kod hampir duplikat (seperti jejari sempadan). Anda boleh menyemak contoh saya pada blok harta yang ditetapkan di bawah mensasarkan div pembungkus sampel.
.bungkus display: block; padding: 6px 10px; latar belakang: #FFF; jejari sempadan: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
Tiada cara menulis CSS secara khusus lebih baik daripada yang lain. Akhirnya ia adalah pilihan anda sebagai pemaju gaya yang anda suka, dan ini juga akan sesuai dengan projek yang anda kerjakan. Ia juga biasa untuk mencari CSS di mana pereka bercampur-campur bersama-sama! Saya secara peribadi merasakannya “bekerja dalam kemajuan” cenderung lebih mudah dengan gaya blok kerana saya sentiasa memeriksa stylesheet untuk membuat penyuntingan atau penambahan. Tetapi untuk domain berat lalu lintas meminimumkan fail CSS anda adalah cara terbaik mutlak untuk pergi.
Menjaga Mereka Langsing
Dengan menggunakan banyak kod pendek yang terdapat di CSS3, anda boleh menyimpan banyak masa pembangunan. Mengedit elemen HTML akan menjadi lebih mudah kerana anda memahami lingo penjimatan masa ini. Di samping itu kod anda akan kelihatan lebih bersih dan mudah dilihat.
Satu-satunya kelemahan adalah bahawa tidak semua penyemak imbas sepenuhnya menyokong sifat-sifat ini. Terdapat penyelesaian untuk banyak isu yang ada seperti di Internet Explorer dan Netscape. Syukurlah web sentiasa maju dan sebagai CSS3 berkembang dengan populariti, kami pasti akan mengalami pertumbuhan dalam keserasian pelayar juga.
RGBa Warna Ketelusan / Kelegapan
RGBavalue baru tidak betul-betul CSS3 harta, tetapi Ketelusan alfa adalah khusus untuk CSS3 sahaja. Daripada nilai "Red Green Blue" biasa yang anda lalui untuk warna, anda boleh sekarang termasuk pilihan ketelusan warna keempat. Oleh sebab itu, pemaju web dilakukan dengan PNGs telus hampir keseluruhannya.
Sintaks dasar memerlukan nilai dari 0-255 dalam tiga (3) slot pertama dan 0-1.0 dalam kedudukan alfa. Julat warna adalah khusus untuk berapa banyak setiap warna (RGB) kelihatan dengan 0 yang tidak ada dan 255 penuh.
/ ** syntax ** / latar belakang: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** contoh ** / div latar belakang: rgba (255, 255, 255, 0.3);
Keserasian silang pelayar
Satu lagi harta kelegapan boleh digunakan dalam beberapa keadaan. Walau bagaimanapun, ini akan menjejaskan keseluruhan elemen HTML dan kandungan dalaman, bukan hanya latar belakang yang anda lihat dalam contoh saya.
Malangnya Internet Explorer tidak menyokong nilai warna RGBa. Pada umumnya anda harus memasukkan hak milik balik dengan kelegapan penuh untuk pelayar kurang standard ini. Anda menetapkan nilai ini dengan nilai yang sama tetapi tidak termasuk keempat (opacity). Ia akan kelihatan seperti itu rgba (255, 255, 255)
Di samping itu, Internet Explorer boleh ditangani dengan lebih anggun melalui keadaan. Anda sebenarnya boleh menyemak sama ada pelayar sedang menjalankan IE dan memaparkan penapis Microsoft CSS proprietari pada arahan. Saya telah memperlihatkan ini dalam contoh saya di bawah (ambil perhatian ini akan muncul di suatu tempat dalam fail HTML anda):
Radius Sempadan CSS3
Saya telah membaca beberapa thread forum yang mengelirukan tentang mewujudkan sempadan bulat dengan CSS3 - tidak begitu banyak di sisi bagaimana ia dilakukan, tetapi dengan sokongan penyemak imbas yang rapi, pemaju web bergegas untuk kod paling mudah untuk turun dan berfungsi seperti yang diharapkan.
/ ** syntax ** / border-radius: kiri atas atas kanan bawah kanan kanan kiri;
The jejari sempadan Sifat berkongsi sintaks serupa untuk mewujudkan sempadan standard, kecuali dalam kes ini kami menyasarkan kotak sudut. Properti ini sebenarnya akan menerima 1 - 4 nilai dan mereka masing-masing menargetkan sudut persimpangan yang berbeza.
- 1 nilai: Semua empat sudut dibulatkan dengan nilai yang sama
- 2 nilai: Nilai pertama terpakai kepada
kiri atasdankanan bawahmanakala nilai kedua mencecahkanan atasdandibahagian bawah kiri - 3 nilai: Pertama terpakai kepada
kiri atassudut, kedua adalah kedua-duanyadibahagian bawah kiri&kanan atasmanakala nilai ke-3 dan akhir digunakan untukkanan bawah - 4 nilai: Semua 4 nilai sasaran sudut dalam susunan berikut: kiri atas, kanan atas, bawah kanan, bawah kiri
/ ** contoh ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Jadi dalam kod di atas kita gunakan jejari sempadan untuk menggunakan kesan bulat 4px pada semua kecuali kanan bawah sempadan yang mendapat lengkung 8px smoothed. Jika anda perasan, kedua-dua kod ini sebenarnya akan menggunakan kesan gaya yang sama.
Keserasian silang pelayar
Sekarang masalah utama ialah jejari sempadan hanya disokong dalam beberapa penyemak imbas. Internet Explorer 9 baru-baru ini menambah sokongan hebat dan Opera akan memberikan ini juga. Walau bagaimanapun, Opera telah mencipta hartanya sendiri -o-border-radius mensasarkan enjin penyemak imbas mereka. Selain itu -moz-border-radius disokong oleh perisian Firefox / Gecko dan -webkit-border-radius untuk Google Chrome / Safari.
Kod di bawah ini adalah contoh templat kosong-tulang saya untuk mewujudkan sudut bulat dengan sokongan pelayar global yang 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;
Fancy Drop Shadow?
Satu lagi aspek CSS3 yang hebat ialah sokongan untuk kotak dan bayang-bayang teks. Ini telah menjadi masalah untuk pemaju pada masa lalu kerana imej latar belakang adalah satu-satunya pilihan yang realistik. Sintaks ini sebenarnya mengikuti peranan ringkas yang jauh lebih mudah daripada sifat-sifat lain yang telah kita capai. Sulit untuk mengingati urutan nilai utama pada mulanya - tetapi lebih banyak latihan yang anda masukkan, semakin mudah ia menjadi.
Malangnya Internet Explorer sekali lagi menjadi ganjil. Setiap penyemak utama utama termasuk Firefox, Google Chrome, Safari dan Opera menyokong sepenuhnya bayang-bayang teks harta. Pemaju telah cuba membina sokongan IE mereka sendiri tetapi masih sangat membataskan. Sintaks dasar ditulis seperti berikut:
/ ** syntax ** / text-shadow: x-offset y-offset blur-radius color; / ** contoh ** / div text-shadow: 2px 2px 1px # 111;
X dan Y mengimbangi pelayar sejauh mana ke kanan dan rendah bayangnya harus muncul. Anda boleh menggunakan nilai-nilai negatif untuk meletakkan bayang-bayang di atas dan kiri atas, masing-masing. Tetapi ini datang dengan sangat canggung sehingga saya mengesyorkan integer positif. Juga nilai radius blur boleh digunakan untuk melicinkan tepi tegar, jika bayangan teks kelihatan tidak semestinya.
Sintaks ini hanya melihat ke dalam notasi asas apabila membuat satu kesan bayang benih tunggal. Pereka yang sangat maju telah belajar untuk mencipta bayang-bayang berganda secara serentak! Saya merujuk jawatan blog yang hebat ini dari belakang pada bulan April 2011 yang masuk ke dalam terperinci mengenai mengenakan bayangan teks. Sekiranya anda mempunyai masa, skim melalui kandungan hanya untuk mendapatkan idea tentang ciri-ciri yang lebih maju, dan pastikan untuk menanda buku itu sebagai rujukan masa depan!
Keserasian silang pelayar
Pengecam terbesar yang kita jalankan ialah Internet Explorer. Masa dan masa lagi Microsoft telah menolak enjin penyemak imbas mereka sendiri yang telah melakukan sub-par di terbaik. Sekarang walaupun dengan CSS3 mengambil pemerintahan di bayang-bayang teks, IE masih di belakang. Terdapat laman web demo yang hebat di mana anda boleh mencari contoh kod dan komentar bersyarat CSS tradisional.
Pada dasarnya anda sedang mencari untuk memeriksa sama ada penyemak imbas pengguna anda berjalan sepadan dengan mana-mana versi Internet Explorer 9 atau di bawah. Kemudian menggunakan penapis MS kita boleh memohon bayangan ke dalam sebarang elemen teks (di atas, kita menggunakan perenggan).
Membawa Peralihan
CSS3 peralihan adalah harta yang paling hangat di pasaran reka bentuk sejak gumpalan nenek! Pereka web telah membuat perbalahan seperti peralihan CSS tulen, walaupun sokongannya adalah terhad kepada penyemak imbas Webkit. Anda boleh menggunakan sifat sekunder untuk Mozilla dan Opera dan sebagainya. Tetapi nota ketinggalan sangat menawan, terutamanya jika anda menentang animasi JavaScript atas sebab apa pun.
Pertama mari kita perhatikan harta peralihan asal. Ini memerlukan 4 nilai yang anda juga boleh memecah menjadi harta benda sendiri. Mereka sesuai dengan peralihan harta(apakah kesannya), tempoh(berapa lama untuk mengeluarkannya), fungsi masa(perubahan dalam kelajuan ke atas animasi), dan kelewatan(bilangan saat menunggu sebelum menghidupkan).
/ ** sintaks ** / peralihan: kelewatan fungsi jangka masa harta; / ** contoh ** / img transition-property: opacity; tempoh peralihan: 2s; peralihan-fungsi masa: mudah masuk; kelewatan peralihan: 0.5s;
Anda harus intuitif memahami maksud untuk kebanyakan sifat-sifat ini kecuali mungkin fungsi masa. Walaupun membingungkan pada mulanya, harta ini hanya mengalihkan peralihan anda secara berbeza supaya kesannya akan mula perlahan, habis perlahan, atau sesuatu yang serupa.
Sekolah W3 mempunyai fungsi masa dalam talian doc yang menyenaraikan semua nilai yang mungkin anda boleh cuba. Saya sentiasa mendapati diri saya Googling untuk panduan ini, namun mereka membuat penanda buku yang berguna.
Keserasian silang pelayar
Sekarang mari kita bawa sokongan penyemak imbas penuh ke dalam permainan. Secara lalai harta peralihan adalah sahaja disokong oleh versi baru Safari. Namun ramai pengguna masih memerlukannya -webkit awalan yang juga terpakai kepada Google Chrome dan enjin rendering yang serupa. Di bawah adalah a “dimuktamadkan” templat blok kod saya cadangkan menyimpan dan menggunakan jika anda memerlukan sokongan peralihan dari majoriti pelayar web.
img transition: opacity 2s easy-in 1s; -webkit-transition: opacity 2s easy-in 1s; / * chrome, safari, kawanan * / -moz-transition: opacity 2s easy-in 1s; / * mozilla + gecko * / -o-transition: opacity 2s easy-in 1s; / * opera * /
Kesan Teks-stroke
Harta ini tidak besar dan anda tidak akan menemui banyak pereka laman web yang menggunakannya hari ini. Tetapi anda boleh menggunakannya teks-lejang untuk membina beberapa kesan yang sangat kemas dengan fon anda. Peramban Webkit seperti Safari dan Chrome adalah penyokong sebenar sahaja harta ini setakat ini. Opera dan Firefox mempunyai kesukaran untuk menjadikan objek teks dengan garis besar yang sama.
/ ** syntax ** / p -webkit-text-stroke: color width; / ** contoh ** / p -webkit-text-stroke: 1px # 222;
Keserasian silang pelayar
Jika anda merasakan keperluan untuk kesan strok teks, anda harus sentiasa memasukkan warna sandaran. Mozilla dan Opera boleh mendapatkan, namun pengguna Internet Explorer tidak mempunyai pilihan lain. Sayangnya ini adalah salah satu sifat CSS3 yang baru yang belum mendapat sokongan yang cukup dari komuniti pemaju pelayar web. Anda perlu meluangkan sedikit masa bermain dengan alat web hebat ini yang dibuat khusus untuk membina garis besar teks CSS3 ini.
Box-sizing
Hartanah ukuran kotak memberikan anda lebih banyak kawalan ke atas jumlah lebar / ketinggian unsur blok mana pun. Secara lalai lebar / ketinggian + sempadan + margin + padding membentuk jumlah keseluruhan kotak. Walau bagaimanapun, menggunakan kotak sempadan pada kandungan anda menolak semua padding dan margin anda ke dalam untuk mengekalkan lebar yang sama. Hanya terdapat dua nilai untuk harta ini, dengan kotak kandungan menjadi lalai.
div width: 550px; padding: 9px; box-sizing: border-box; / * lebar akan kekal pada 550px * /
Seperti yang anda boleh bayangkan ini akan menjadi berguna pada satu ketika semasa kerjaya CSS anda. Padding dan margin boleh menjadi kesakitan yang nyata dan apabila anda menambah di sempadan anda cenderung kehilangan jejak piksel.
Keserasian silang pelayar
Opera dan IE 8 menyokong harta baharu ini secara lalai. IE7 dan ke bawah terperangkap dengan persediaan kotak kandungan melainkan pengunjung anda menggunakan mod quirks. Satu-satunya penambahan yang perlu anda ketahui mengenai webkit sasaran khusus dan enjin penyemak imbas Mozilla.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-size: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /
Tulisan CSS3 Tulen
Lajur agak rumit dengan CSS3 tetapi boleh dicapai dengan kod minima. Ciri 2 yang anda mahu tumpu adalah kiraan jumlah lajur dan jurang ruang. Jumlah rujukan merujuk kepada jumlah lajur yang anda ingin memohon sementara jurang mencipta margin antara setiap satu.
div # cols column-count: 3; ruang-jurang: 10px;
Dalam contoh saya, kita dapat melihat ID #cols digunakan sebagai bekas. Di dalamnya kita memecah div menjadi 3 tiang dengan jurang 10px antara masing-masing. Selanjutnya anda boleh menetapkan lebar lajur yang digunakan untuk menetapkan lebar keseluruhan setiap lajur dan bukannya menyenaraikan nombor pepejal.
Keserasian silang pelayar
Apa-apa sahaja sebelum IE8 semestinya tidak dapat menggunakan harta ini. Tetapi seperti yang kita lihat dalam setiap contoh, Mozilla dan Webkit menawarkan penyelesaian mereka sendiri untuk beberapa penyemak imbas. Jika anda memerlukan templat lihat kod contoh kecil saya di bawah:
div # sidebar width: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; kiraan lajur: 3; ruang-jurang: 7px;
Custom @ font face
Anda mesti mendengar tentang keghairahan mengenai fon langganan CSS3. Dengan menggunakan @ font-face property kami boleh mengimport gaya fon luaran dan menggunakannya seperti mana-mana keluarga lain. Sintaks agak rumit dan anda perlu meluangkan masa untuk mendapatkannya dengan betul. Blok untuk @ font-face digunakan untuk menentukan nama keluarga, selepas itu anda boleh menggunakannya dalam diri anda keluarga font hartanah di mana sahaja!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Internet Explorer sahaja * / Jadi anda lihat di atas saya tidak menyasarkan jenis fon tertentu, tetapi sintaks adalah apa yang harus ditonjolkan. Perhatikan bahawa hanya Internet Explorer menyokong .eot jenis fon, sementara .ttf dan .otf adalah pilihan yang popular untuk pelayar lain. Juga penting, anda harus memahami bahawa anda boleh lulus dalam URL fon dari pautan langsung, iaitu. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Tidak ada isu silang pelayar sebenar dengan persediaan ini kerana semua enjin rendering boleh menghuraikan jenis fail font ini. Ingatlah bahawa untuk sokongan IE, anda mesti memasukkan versi eot serta asal anda. Saya merasakan bahawa artikel Sekolah W3 mempunyai katalog maklumat yang paling penting yang perlu anda periksa.
Menukar kepada CSS Miniatur
Topik ini sering diperdebatkan kerana ia berfungsi dengan tujuan yang berbeza untuk setiap projek. Dalam satu tangan, pemaju web menghabiskan banyak masa untuk menulis stylesheets mereka. Tidak ada cara untuk menyulitkan data plaintext jenis ini dan menyembunyikannya dari mata yang mengintip. Sekiranya anda cuba mengekalkan orang lain secara terang-terangan mencuri kod anda yang terbaik yang boleh anda lakukan adalah kekacauan sehingga gaya dan menghapuskan semua rehat garis / ruang.
Proses ini boleh dilabelkan sebagai miniaturisasi kod anda. Secara umumnya pemaju akan menulis CSS dalam format standard dan kemudian mengalih keluar semua ruang kosong sebelum memuat naik ke pelayan web. Kemudian anda mempunyai salinan tempatan untuk mengedit dengan cepat sementara juga menyediakan versi yang lebih kecil pada projek langsung. Kaedah ini jelas berguna untuk mengurangkan beban halaman bersama dengan mengekalkan perampas kod di teluk.
Pautan yang saya hantar di atas membawa kepada Minify CSS mempunyai beberapa bahan bacaan hebat mengenai subjek ini. Tapak ini juga menyediakan alat berasaskan pelayar untuk mengeluarkan ruang putih dan kunci utama dari kod anda. CSS Compressor adalah satu lagi pilihan sukan antara muka yang mudah yang berjalan secara langsung dalam pelayar web anda. Saya juga telah mendengar perkara yang baik tentang CSS Bersih, walaupun saya tidak pernah menggunakan aplikasi itu sendiri.
Pautan Berkaitan
Untuk memastikan anda menolak ke hadapan, saya telah menyediakan enam pautan berguna dari seluruh Web. Ini termasuk notasi singkat tetapi panduan dan tutorial berguna untuk mengakses ketika mengamalkan kod CSS kod pendek yang baru.
- Panduan Permulaan untuk CSS3
- Panduan Shorthand CSS
- Adakah Anda Menggunakan CSS3 Dengan Sesuai?
- Kandungan CSS dan carta keserasian pelayar
- CSS3 + Peningkatan Progresif = Reka Bentuk Pintar
- Lengkapkan Indeks Hartanah CSS / CSS3
Kesimpulannya
Ia memerlukan banyak dedikasi dan amalan menulis kod CSS untuk membina jadual konkrit yang boleh anda ikuti untuk setiap projek. Kebanyakan pereka web gembira untuk mengambil projek dan idea baru, jadi anda pasti akan mencari masa untuk mengamalkan petua pengekodan berguna ini. Cuba menyalin lembaran rujukan kecil untuk kemudahan anda sendiri sekiranya anda tidak dapat menemui apa-apa lembaran menipu, atau lebih buruk lagi anda kehilangan sambungan Internet!
Adakah anda tahu apa-apa ciri atau jalan pintas CSS3 yang berguna? Kami ingin mendengar pendapat dan idea anda dalam komen perbincangan. Pemaju web mendorong lebih banyak standardisasi dalam W3C dan dengan jelas peralihan semakin mudah. CSS3 menyediakan manfaat yang hebat dan jika anda boleh menguasai kod pengaturcaraan ini akan memastikan saiz fail anda rendah dan menghalang copycats daripada mencuri kod anda.
