Saya baru saja menonton
video presentasi yang baik oleh Mathias dari Fronteers 2012 yang saya
temukan menarik dan inspiratif. Aku
sudah ada dalam pikiran beberapa hal yang sama, jadi aku akhirnya
menulis artikel ini turun. Ini
tentang beberapa hal acak dan fakta yang mungkin (tidak) tahu tentang
HTML & CSS.
Hal-hal yang mungkin tidak tahu tentang HTML & CSS
CSS em Unit
Awalnya, CSS em Unit berasal dari lebar M huruf besar, yang mana namanya berasal. Saya mengingatkan diri saya pertama kali membaca ini dalam sebuah buku CSS beberapa waktu lalu, tidak yakin tentang nama buku, tetapi Anda dapat memeriksa halaman Wikipedia untuk lebih lanjut tentang topik ini.HTML5 tag
Elemen HTML5 struktural adalah implementasi praktis dari penamaan pencarian kalangan kelas CSS dan penyeleksi id ditemukan di alam liar pada waktu itu. Saya pertama kali membaca tentang bagaimana saat ini HTML5 tag lahir saat menggali ke Memperkenalkan HTML5 Oleh Bruce Lawson dan Remy Sharp.Minimal halaman web yang valid
Dengan kedatangan HTML5, Anda hanya akan perlu untuk menentukan DOCTYPE dan judul dalam rangka menciptakan sebuah halaman web baru yang valid. Jadi, secara teoritis, tidak ada tag html, kepala atau tubuh yang diperlukan untuk itu. Hal ini terjadi karena browser menganggap mereka pula, hanya memeriksa debugger browser 'dengan kode di bawah ini:
<Doctype HTML!><title> Bazinga </ title>
CSS spesifisitas
Dibutuhkan 256 penyeleksi dirantai CSS class untuk mengalahkan suatu kekhususan id. Ketika Chris Coyier membuat contoh ini, telah terjadi banyak diskusi tentang topik ini. Ryan Seddon menulis beberapa pemikiran tentang ini juga.
Juga, pada topik, sebuah fakta yang menarik adalah bahwa tidak ada panjang maksimum untuk nama kelas atau id dalam CSS.Warna
Peru dan Tomat sebenarnya baik CSS valid nama warna. Juga, hex # badA55 warna tidak begitu badass, itu sebenarnya semacam kapur :)
Juga, ketika menggunakan atribut bgcolor HTML (usang) seperti itu: <body bgcolor="chucknorris"> </ body>, warna merah berdarah yang diberikan. Mathias disebutkan dalam videonya sebagai darah musuh Chuck Norris. Murni kebetulan atau tidak ... :)
Baca diskusi Stack Overflow untuk mencari tahu mengapa HTML berpikir "chucknorris" adalah warna.CSS dapat # lucu
Periksa CSS baris berikut untuk menempatkan senyum di wajah Anda:
# Semesta: {sebelum isi: "";}Ninja. {Visibility: hidden;}. Anak-ini-hari {-webkit-perspektif: none;}. Pekerjaan: {setelah isi: "! Beer";}
Juga, Anda mungkin ingin memeriksa CSSHumor di Twitter untuk lebih.CSS px = Perangkat px!
The "px" unit di CSS tidak benar-benar ada hubungannya dengan piksel layar, meskipun nama buruk dipilih. Anda perlu mengambil napas dalam-dalam dan mengambil waktu Anda untuk membaca lebih lanjut di sini dan di sini.Tidak ada (lebih) CSS4
Tampaknya bahwa tidak ada hal seperti CSS4 setelah semua. Juga, CSS3 adalah segalanya setelah CSS2.1, itu semua tentang modul. Tab Atkins menulis secara rinci tentang mengapa tidak ada hal seperti CSS4.Bagaimana untuk mengetahui apakah HTML5 sebuah situs menggunakan # lucu
* Cobalah pada Internet Explorer.
* Apakah itu bekerja?
* Tidak?
* Itu HTML5.
HTTP request
"Permintaan HTTP tercepat adalah satu tidak dibuat."
Ini bukan HTML & CSS terkait tapi saya suka baris ini banyak. Setiap kali saya bekerja pada sebuah proyek dan mencoba untuk mengoptimalkan jumlah permintaan HTTP, hal ini muncul dalam pikiran saya. Saya kira saya pertama kali melihatnya saat membaca pada posting Steve Souders '.:: Sebelum & setelah elemen semu ::
Sampai beberapa hari yang lalu, Firefox adalah satu-satunya yang didukung transisi dan animasi untuk elemen CSS semu seperti :: sebelum dan sesudah ::. Itu fitur yang hebat dan kabar baik untuk 2013 adalah bahwa WebKit sekarang mendukung itu juga. Anda sekarang dapat membuka Google Chrome Canary dan melihat mereka beraksi.Ketika Anda drop IE6 dan IE7 ...
IE6 tidak memainkan peran penting lagi, sehingga dengan itu dalam pikiran, sekarang ini sangat OK untuk menggunakan:
* Pemilih kelas Beberapa CSS (misalnya. Foo.bar)
* Atribut selektor (misalnya E [foo])
* Tetap posisi
* Segera pemilih anak (misalnya foo>.. Bar)
Baca lebih lanjut tentang hal ini di sini dan jika IE7 tidak pada daftar didukung browser Anda juga, Anda mungkin ingin menggunakan clearfix terpendek yang pernah.Mahal CSS properti
Biasanya, properti CSS tidak mahal sama sekali, tapi ketika datang tentang lukisan browser, Anda harus menyadari bahwa beberapa hal berikut dapat mempengaruhi cara membuat halaman Anda:
* Posisi: fixed
* Background-position: fixed
* Border-radius
* Background-size
* Box-shadow
* Gradien
Periksa Kinerja Lebih Baik Dengan CSS slide Alat oleh Paul Irlandia untuk mengetahui lebih lanjut.Itu saja!
Hal-hal yang mungkin tidak tahu tentang HTML & CSS
CSS em Unit
Awalnya, CSS em Unit berasal dari lebar M huruf besar, yang mana namanya berasal. Saya mengingatkan diri saya pertama kali membaca ini dalam sebuah buku CSS beberapa waktu lalu, tidak yakin tentang nama buku, tetapi Anda dapat memeriksa halaman Wikipedia untuk lebih lanjut tentang topik ini.HTML5 tag
Elemen HTML5 struktural adalah implementasi praktis dari penamaan pencarian kalangan kelas CSS dan penyeleksi id ditemukan di alam liar pada waktu itu. Saya pertama kali membaca tentang bagaimana saat ini HTML5 tag lahir saat menggali ke Memperkenalkan HTML5 Oleh Bruce Lawson dan Remy Sharp.Minimal halaman web yang valid
Dengan kedatangan HTML5, Anda hanya akan perlu untuk menentukan DOCTYPE dan judul dalam rangka menciptakan sebuah halaman web baru yang valid. Jadi, secara teoritis, tidak ada tag html, kepala atau tubuh yang diperlukan untuk itu. Hal ini terjadi karena browser menganggap mereka pula, hanya memeriksa debugger browser 'dengan kode di bawah ini:
<Doctype HTML!><title> Bazinga </ title>
CSS spesifisitas
Dibutuhkan 256 penyeleksi dirantai CSS class untuk mengalahkan suatu kekhususan id. Ketika Chris Coyier membuat contoh ini, telah terjadi banyak diskusi tentang topik ini. Ryan Seddon menulis beberapa pemikiran tentang ini juga.
Juga, pada topik, sebuah fakta yang menarik adalah bahwa tidak ada panjang maksimum untuk nama kelas atau id dalam CSS.Warna
Peru dan Tomat sebenarnya baik CSS valid nama warna. Juga, hex # badA55 warna tidak begitu badass, itu sebenarnya semacam kapur :)
Juga, ketika menggunakan atribut bgcolor HTML (usang) seperti itu: <body bgcolor="chucknorris"> </ body>, warna merah berdarah yang diberikan. Mathias disebutkan dalam videonya sebagai darah musuh Chuck Norris. Murni kebetulan atau tidak ... :)
Baca diskusi Stack Overflow untuk mencari tahu mengapa HTML berpikir "chucknorris" adalah warna.CSS dapat # lucu
Periksa CSS baris berikut untuk menempatkan senyum di wajah Anda:
# Semesta: {sebelum isi: "";}Ninja. {Visibility: hidden;}. Anak-ini-hari {-webkit-perspektif: none;}. Pekerjaan: {setelah isi: "! Beer";}
Juga, Anda mungkin ingin memeriksa CSSHumor di Twitter untuk lebih.CSS px = Perangkat px!
The "px" unit di CSS tidak benar-benar ada hubungannya dengan piksel layar, meskipun nama buruk dipilih. Anda perlu mengambil napas dalam-dalam dan mengambil waktu Anda untuk membaca lebih lanjut di sini dan di sini.Tidak ada (lebih) CSS4
Tampaknya bahwa tidak ada hal seperti CSS4 setelah semua. Juga, CSS3 adalah segalanya setelah CSS2.1, itu semua tentang modul. Tab Atkins menulis secara rinci tentang mengapa tidak ada hal seperti CSS4.Bagaimana untuk mengetahui apakah HTML5 sebuah situs menggunakan # lucu
* Cobalah pada Internet Explorer.
* Apakah itu bekerja?
* Tidak?
* Itu HTML5.
HTTP request
"Permintaan HTTP tercepat adalah satu tidak dibuat."
Ini bukan HTML & CSS terkait tapi saya suka baris ini banyak. Setiap kali saya bekerja pada sebuah proyek dan mencoba untuk mengoptimalkan jumlah permintaan HTTP, hal ini muncul dalam pikiran saya. Saya kira saya pertama kali melihatnya saat membaca pada posting Steve Souders '.:: Sebelum & setelah elemen semu ::
Sampai beberapa hari yang lalu, Firefox adalah satu-satunya yang didukung transisi dan animasi untuk elemen CSS semu seperti :: sebelum dan sesudah ::. Itu fitur yang hebat dan kabar baik untuk 2013 adalah bahwa WebKit sekarang mendukung itu juga. Anda sekarang dapat membuka Google Chrome Canary dan melihat mereka beraksi.Ketika Anda drop IE6 dan IE7 ...
IE6 tidak memainkan peran penting lagi, sehingga dengan itu dalam pikiran, sekarang ini sangat OK untuk menggunakan:
* Pemilih kelas Beberapa CSS (misalnya. Foo.bar)
* Atribut selektor (misalnya E [foo])
* Tetap posisi
* Segera pemilih anak (misalnya foo>.. Bar)
Baca lebih lanjut tentang hal ini di sini dan jika IE7 tidak pada daftar didukung browser Anda juga, Anda mungkin ingin menggunakan clearfix terpendek yang pernah.Mahal CSS properti
Biasanya, properti CSS tidak mahal sama sekali, tapi ketika datang tentang lukisan browser, Anda harus menyadari bahwa beberapa hal berikut dapat mempengaruhi cara membuat halaman Anda:
* Posisi: fixed
* Background-position: fixed
* Border-radius
* Background-size
* Box-shadow
* Gradien
Periksa Kinerja Lebih Baik Dengan CSS slide Alat oleh Paul Irlandia untuk mengetahui lebih lanjut.Itu saja!
Tidak ada komentar:
Posting Komentar