Mengekspresikan TI

Masukan stylesheet di Puncak

Jika Anda ingin halaman untuk memuat secara progresif; yaitu, kita menginginkan browser untuk menampilkan konten apapun itu secepat mungkin, menempatkan CSS di bagian atas halaman dalam HEAD dokumen. Hal ini membuat halaman muncul untuk memuat lebih cepat, karena hal ini memfasilitasi render progresif halaman. Hal ini sangat penting untuk halaman dengan banyak konten dan bagi pengguna koneksi internet lambat.

Ini adalah fakta yang terdokumentasi untuk meningkatkan pengalaman pengguna secara keseluruhan, penting untuk memberikan indikator kemajuan dan masukan visual. Untuk menghindari harus redraw elemen halaman, dalam kasus jika gaya perubahan mereka, beberapa browser, termasuk IE, blok rendering dari halaman sampai CSS diberi beban penuh. Karena itu, pengguna mendapat untuk melihat halaman putih kosong.

The W3 HTML Spesifikasi 'juga menyatakan bahwa CSS harus saya masukkan dalam bagian HEAD halaman HTML. at the bottom of the page, so it's best not to use it. Perlu diketahui juga bahwa, Dalam IE @import berperilaku sama dengan menggunakan <link> di bagian bawah halaman, jadi yang terbaik untuk tidak menggunakannya.

Hindari Menggunakan fitur Browser Tertentu

Filter: Gunakan filter meningkatkan konsumsi memori dan diterapkan secara per elemen, bukan per gambar, sehingga masalah dikalikan. Juga, Filter adalah IE Proprietary, maka tidak akan bekerja sebagaimana dimaksud pada browser lainnya. Jika Anda ingin latar belakang transparan atau gradien, gunakan 1Pixel dengan gambar.
Ekspresi: ekspresi CSS adalah fitur baik untuk memiliki dalam CSS, tapi masih adalah fitur spesifik IE. Juga, penting untuk dicatat bahwa, ungkapan-ungkapan yang dievaluasi saat halaman dirender dan diubah ukurannya, menggulir dan bahkan ketika pengguna bergerak mouse ke halaman. Tak perlu dikatakan ini dapat mempengaruhi kinerja dari halaman Anda. Oleh karena itu dalam kata-kata sederhana, Hindari menggunakan ekspresi CSS, kecuali jika Anda merasa kelebihan 'berat lebih dari kontra perusahaan

Externalise Anda CSS

Menggunakan CSS eksternal akan mengakibatkan loading lebih cepat dari halaman karena file-file JavaScript dan CSS cache oleh browser. Inline CSS pada dokumen HTML bisa didownload setiap kali dokumen HTML yang diminta. Ini sebenarnya bisa mengurangi jumlah permintaan HTTP yang dibuat tetapi kemudian meningkatkan ukuran dokumen HTML. Eksternal CSS cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.

Harap dicatat bahwa, jika pengguna di situs Anda memiliki pandangan beberapa halaman per sesi dan banyak dari halaman Anda kembali menggunakan script yang sama dan stylesheet, ada potensi manfaat yang lebih besar dari file eksternal cache.

Pack Anda File CSS

Packing atau berderak CSS Anda adalah praktek menghapus karakter yang tidak perlu dari kode untuk mengurangi ukurannya dengan demikian meningkatkan beban kali.

CSS dapat saya berderak dengan menghapus semua komentar dan karakter yang tidak diinginkan seperti ruang putih, baris baru dll

Pasang IE 6, MSIE telah cukup baik untuk kita UI pengembang dengan menambahkan lebih beberapa properti CSS standar untuk sebagian besar browser standar lainnya. Salah satu properti berguna seperti di "min-height". Properti cukup lurus ke depan yang perlu ada penjelasan panjang lebar. Ketika min-height untuk divisi yang dibuat, selalu mempertahankan bahwa tinggi set bila konten itu rumah menempati kurang dari itu bisa memegang dan penting (tidak seperti "tinggi" vanili properti polos) skala atau dengan kata CSS, itu berperilaku seperti divisi yang "tinggi" diatur ke "auto" ...

Bagi sebagian dari kita pengembang miskin, yang masih diperlukan untuk kode CSS yang juga harus bekerja di IE6, un-ketersediaan dari "min-height", bisa membuktikan stopper kadang ... keputusasaan Donot.

Untungnya, kami memiliki kebiasaan cukup di IE, bahwa kami akan gunakan untuk keuntungan keluar dan hack jalan kita melalui untuk mencapai tujuan kami ... yaitu membuat sebuah divisi DIVISI seakan nya min-height di IE6

Solusi 1: Menggunakan Hack Underscore [ ... Read more ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Solusi 2: Menggunakan Atribut CSS Hack Pemilih

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


Atribut CSS Hack Pemilih mengambil keuntungan dari fakta browser IE6 sebelumnya tha mengabaikan sebuah atribut-pemilih. Perhatikan kebutuhan divisi lain wadah dengan kelas "SomeClass" =. Hanya Hadirnya atribut class untuk divisi ini, menimpa tinggi kembali ke mobil untuk Opera, Mozilla dan MSIE7 dan kemudian. IE6, yang tidak mendukung penyeleksi atribut, mengabaikannya.

Lihat Demo hack min-height untuk IE6

Jika Anda menggunakan XML dan XSL, maka Anda mungkin telah menemukan waktu, ketika Anda harus bermain-main dengan atribut dan nilai dari node XML XSL Anda. Mereka banyak situs dengan info panjang lebar tentang hal ini, namun tidak satupun saya temukan adalah singkat dan tepat ... Ini adalah TIDAK TUTORIAL XML / XSL, tapi upaya saya untuk menempatkan bersama-semacam daftar contekan ...

Sampel XML yang kita akan bekerja dengan terlihat seperti ini ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Jadi Mari kita mulai mengubah XML di atas kita menggunakan XSL

Contoh 1: Menampilkan nilai pada Atribut dipilih

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

Hasilnya akan terlihat seperti HTML

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Contoh 2: Looping melalui dan menampilkan semua Nama Atribut XML dan Nilai mereka

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

Hasilnya akan terlihat seperti HTML


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Lihat saja nanti, saya akan terus mengupdate ini dengan temuan baru ...