it-swarm-id.com

Apa cara terbaik untuk menerapkan lintas peramban css?

Apa cara terbaik untuk menerapkan lintas peramban css?

Aturan: satu pendekatan untuk jawaban.

4
stacker

Anda dapat menggunakan komentar bersyarat untuk memperbaiki masalah dengan Internet Explorer. Selain itu, Anda tidak perlu menargetkan Firefox/Chrome/Opera secara terpisah satu sama lain, mereka semua mendukung standar.

Caching seharusnya tidak masuk ke dalamnya; Anda harus menyajikan kode yang sama untuk semua browser.

4
DisgruntledGoat

Cara terbaik dan termudah adalah menggunakan perpustakaan. Perpustakaan seperti OOCSS, Blueprint, atau 960gs sudah direkayasa untuk mereplikasi tampilan mereka di browser utama. Yang tersisa setelah itu, sebagian besar waktu, adalah memastikan bahwa gaya khusus Anda sesuai dengan lintas-browser dan bahwa markup Anda tidak menghasilkan masalah.

Hindari peretasan seperti wabah jika memungkinkan (ya, gunakan persyaratan).

2
Kenneth Love

Ketika saya membaca pertanyaan dan jawaban seperti ini saya mulai berpikir saya mungkin gila, tetapi saya telah menulis situs web yang cukup rumit menggunakan sedikit css, termasuk css3 dan trik-trik lainnya, dan saya tidak pernah harus menggunakan bahkan untuk komentar bersyarat.

Namun saya selalu memeriksa pekerjaan saya di beberapa browser (saya kode terutama di Chrome, dan menguji di firefox dan ie7) selama pengkodean. Ketika saya melihat masalah muncul, saya hanya mengambil langkah mundur, mencari tahu mengapa hal-hal yang berbeda, dan sering memilih pendekatan yang sedikit berbeda.

Yang sedang berkata, saya memiliki minat intelektual terhadap peretasan dan metode yang berbeda ini. Saya sangat suka membaca tentang teknik yang digunakan oleh CSS3 PIE dan modernizr.

Cara terbaik untuk mendekati pengkodean lintas-browser adalah dengan mengetahui perbedaan cara browser yang berbeda akan menginterpretasikan kode Anda, dan menulisnya dengan cara yang tidak bisa membantu tetapi mereka memperbaikinya.

1
Zach Lysobey

desain dan kembangkan dengan standar web
memvalidasi dokumen Anda, dan style sheet secara konstan!
cross-browser/cross-platform test setiap hari!
paling tidak sebelum Anda mengirimkan permintaan tarik atau membuat komitmen ke repositori.

anda harus menulis dokumen yang sesuai, tetapi ini sangat penting untuk menulis lintas-browser/lintas-platform css.

catatan: kekuatan validasi sebenarnya tidak sesuai 100% dari waktu; Anda akan mendapatkan kekuatan super setelah Anda memahami apa yang tidak perlu divalidasi, dapat ditunda, dan harus segera diperbaiki.
dan itulah kekuatannya: validasi konstan memperkuat aturan spesifikasi, dan Anda akan berpengalaman. terus-menerus pengujian lintas-browser/lintas-platform membuat Anda tetap tertarik pada lembar gaya agen pengguna browser mana yang paling sering Anda lawan. sesuaikan gaya Anda dengan demikian, Anda memiliki lebih sedikit masalah.

anda dapat menggunakan pustaka dan kerangka kerja jika Anda mau, tetapi Anda mengabstraksikan semua luka dan rasa sakit dari alur kerja Anda dan Anda tidak akan pernah mendapatkan mata detail yang bagus untuk gaya yang Anda minta di sini. Namun, libs/frameworks melakukan pekerjaan yang baik untuk memberi Anda kekuatan itu, meskipun itu biasanya disertai dengan mengasapi halaman.

reset.css, normalizr.css, dan bahkan reset *{border:none; margin:0; padding:0) adalah senjata di gudang senjata Anda untuk menyamakan lapangan permainan antara browser yang merender gaya Anda, atau sendiri.

ya, saya memang merekomendasikan * "hack", dengan dua opsi lain. masing-masing memiliki tempat sendiri ketika melakukan pertempuran dengan agen-pengguna.

selain itu, adalah tidak masuk akal untuk tidak memanfaatkan kelemahan yang dimiliki beberapa agen pengguna, karena kelemahan tersebut tidak akan menghasilkan 100% kontinuitas dan perlu ditangani. dalam melakukannya, kekurangan itu sendiri memberi Anda kait yang sempurna untuk mendeteksi fitur, atau bahkan mengendus-endus mereka, sehingga mereka dapat diperlakukan sesuai!

gunakan setiap retasan, cacat, fitur, non-fitur yang bisa Anda dapatkan untuk membengkokkan dom dan memaksa browser sejajar.

...... jika Anda harus. tetapi jika Anda mengembangkan dengan standar web, Anda akan menemukan bahwa Anda tidak akan membutuhkannya sama seperti sebelumnya.

dan karena Anda kurang mengandalkan mereka, ketika Anda mendapatkan kesempatan untuk menggunakannya untuk mengatasi masalah, gunakan dengan cepat! Anda sudah tahu apa masalahnya, dan Anda juga memiliki solusi yang menargetkan masalah dan tidak ada yang lain.

masing-masing browser memiliki cara mereka sendiri untuk ditargetkan semata-mata, komentar bersyarat yang paling jelas.
menggunakan komentar bersyarat untuk ie6-9, dan gunakan kompilasi bersyarat untuk membuat gaya untuk ie10 dan ie11.
tetapi sekali lagi, jika Anda adalah dww, dan dvwws, Anda dapat memasukkannya dalam setiap dokumen yang Anda buat, tetapi menemukan bahwa style sheet mandul, hosting beberapa gaya hanya menargetkan perbedaan 1-3 piksel, atau mendapatkan latar belakang -warna untuk merentangkan (atau tidak) 100%, dll.

1
albert

Apa yang saya lakukan adalah menggunakan reset CSS dan kemudian pernyataan kondisional. Reset CSS memperbaiki hampir semua masalah dan perbaikan bersyarat setiap masalah di IE. Jika ada perbedaan antara browser lain, saya biasanya mencoba mengatasinya, seperti menambah lebar untuk semua browser atau ukuran font.

Saya pribadi menggunakan reset CSS YUI.

0
Darryl Hein

CSS3 PIE terlihat cukup menjanjikan sebagai lapisan kompatibilitas CSS3. Tentu saja, ada kekhawatiran lintas-browser lainnya untuk versi CSS sebelumnya.

Terkait pertanyaan tentang IE6, banyak info berguna: Haruskah saya repot mendukung IE6?

0
JasonBirch

Prefacing ini dengan peringatan agar tidak menggunakan peretasan CSS.

Dari sudut pandang kinerja murni, caching akan lebih efektif dengan satu file jika tanpa alasan lain selain merespons sekali terhadap permintaan HTTP tunggal dari klien. Selain melayani file yang sama untuk setiap pengguna terlepas dari browser, Komentar bersyarat memblokir unduhan dalam beberapa situasi.

Untuk menargetkan semua versi Internet Explorer Anda yang berbeda dalam satu file ada berbagai peretas CSS. Perlu diingat bahwa ini akan membuat CSS Anda tidak valid (jika validasi menjadi perhatian Anda).

warna tubuh {
: merah;/* semua browser */
 warna: hijau\9;/* IE8 dan di bawah */
 * Warna: kuning;/* IE7 dan di bawah */
 _Color: orange;/* IE6 */
}

Pemblokiran komentar bersyarat benar-benar hanya masalah dalam beberapa kasus di IE8 ketika ada komentar bersyarat. Tergantung pada apa yang Anda pikirkan tentang mendukung Internet Explorer, ini mungkin atau mungkin tidak menjadi masalah.

Saya pribadi menggunakan komentar bersyarat. Saya pribadi percaya bahwa peretasan CSS sangat buruk, dan bahwa setiap kinerja yang datang dari komentar bersyarat baik nyata atau yang dibayangkan adalah tidak sebanding dengan masalahnya yang peretas CSS sering menyebabkan.

Komentar bersyarat relatif mudah diimplementasikan, dan ada artikel bagus tentang penggunaannya pada Quirksmode. Berikut ini hanya akan membahas IE6:

<! - [if IE 6]> 
 <link rel = "stylesheet" type = "teks/css" href = "/ media/css/ie6.css" /> 
 <! [endif] ->

Ada sintaks yang akan memungkinkan Anda menargetkan Internet Explorer versi yang sama dengan, kurang dari, lebih besar dari, kurang dari atau sama dengan, lebih besar dari atau sama dengan nomor versi yang diberikan. Contoh di atas adalah salah satu sama dengan.

0
Bryson