Dukungan IE8 untuk CSS Media Query

178

Apakah IE8 tidak mendukung permintaan media CSS berikut:

@import url("desktop.css") screen and (min-width: 768px);

Jika tidak, apa cara penulisan alternatif? Hal yang sama berfungsi dengan baik di Firefox.

Adakah masalah dengan kode di bawah ini?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);
html css responsive-design internet-explorer-8 media-queries testndtv
sumber
bagi mereka yang ingin mencoba css inline dengan media dan penggunaan merespon (.min) Js pekerjaan merespon doesnt dalam situasi ini - tampaknya bekerja untuk file css
NoWomenNoCry

Jawaban:

77

Versi Internet Explorer sebelum IE9 tidak mendukung permintaan media .

Jika Anda mencari cara merendahkan desain untuk pengguna IE8, Anda mungkin menemukan komentar bersyarat IE sangat membantu. Dengan menggunakan ini, Anda dapat menentukan style sheet khusus IE 8/7/6 yang menuliskan aturan sebelumnya.

Sebagai contoh:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Ini tidak akan memungkinkan untuk desain responsif di IE8, tetapi bisa menjadi solusi yang lebih sederhana dan lebih mudah diakses daripada menggunakan plugin JS.

Harun
sumber
94
Saya tidak melihat bagaimana stylesheet bersyarat akan menyelesaikan masalah desain yang responsif.
James Westgate
8
Saya tidak mengerti bagaimana solusi ini memecahkan desain responsif di IE? Memuat stylesheet yang berbeda tergantung pada browser tidak ada hubungannya dengan menggunakan properti style yang berbeda tergantung pada ukuran browser misalnya.
Klikerko
13
Saya pikir jawaban yang benar adalah bahwa IE8 tidak mendukung permintaan media . Jawaban ini semacam mengatakan itu tetapi tidak sepenuhnya jelas pada pandangan pertama. Bagaimanapun, saya pikir itu memang memiliki dukungan dan jawaban ini memang membantu saya menyadari sebaliknya.
Jason
54
Memang benar bahwa jawaban ini bukan solusi TAPI dan bagi saya itu adalah "TETAPI" yang besar, faktanya adalah bahwa IE8 tidak digunakan pada iPad, atau tablet android. IE8 dapat digunakan pada XP / Vista PCs sebagian besar dari 2003 hingga 2009, layar utamanya sekitar 1024px. Windows Mobile berada di bawah IE6, dan Windows Pone di bawah IE9 +. Pertanyaan sebenarnya di sini adalah bertanya pada diri sendiri apakah membuat responsif untuk IE8 benar-benar berguna?
Gregoire D.
16
@GregoireD. Ya itu. Karena ada orang yang melihat halaman web dengan zoom. Di perusahaan saya, kami memformat halaman sejak 4x zoom di 800x600, untuk aksesibilitas. Itu membuat layar seperti 400px lebar. Media-queries sangat berguna untuk itu, terlepas dari browser yang Anda pilih (dan IE8 disertakan).
Arkana
341

css3-mediaqueries-js mungkin adalah yang Anda cari: skrip ini mengemulasi kueri media. Namun (dari situs skrip) "tidak berfungsi di @imported stylesheet (yang seharusnya tidak Anda gunakan karena alasan kinerja). Juga tidak akan mendengarkan atribut media dari elemen <link>dan <style>".

Dalam nada yang sama Anda memiliki Respond.js yang lebih sederhana , yang hanya memungkinkan min-widthdan max-widthkueri media.

Knu
sumber
7
Mengapa ini tidak dilabeli sebagai jawabannya? Sempurna untuk saya, terima kasih. Omong-omong, Anda tidak boleh menggunakan permintaan impor css karena overhead.
RichW
sempurna, persis apa yang saya cari!
Suatu hari
Terima kasih!! Jawaban ini, dan response.js, menyelamatkan saya banyak waktu untuk melakukan solusi untuk mediaqueries di ie8.
Ingusmat
3
nevermind -> .js harus dimasukkan setelah file .css ... xD
kaljak
4
Menanggapi berfungsi, tetapi css3-mediaqueries tidak. Saya kira itu karena Menanggapi mandiri, tetapi css3-mediaqueries bergantung pada beberapa fungsi jQuery seperti deteksi agen pengguna dan fungsi ini sudah ditinggalkan dan dihapus (lihat dokumen jQuery).
Anton Boritskiy
50

Solusi terbaik yang saya temukan adalah Respond.js terutama jika perhatian utama Anda adalah memastikan desain responsif Anda bekerja di IE8. Ini cukup ringan pada 1kb ketika min / gzip dan Anda dapat memastikan hanya klien IE8 yang memuatnya:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Ini juga metode yang disarankan jika Anda menggunakan bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

Brandon Pugh
sumber
14

IE8 (dan versi yang lebih rendah) dan Firefox sebelum 3.5 tidak mendukung permintaan media. Safari 3.2 mendukung sebagiannya.

Ada beberapa solusi yang menggunakan JavaScript untuk menambahkan dukungan permintaan media ke browser ini. Coba ini:

Plugin Media Queries jQuery (hanya berurusan dengan lebar maks / min)

css3-mediaqueries-js - perpustakaan yang bertujuan untuk menambahkan dukungan permintaan media ke browser yang tidak mendukung

Faraz Kelhini
sumber
Ok..saya baru saja memasukkan css3-mediaqueries.js di halaman saya..Masih tidak berfungsi di IE..yaitu permintaan media "@import url (" desktop.css ") tidak hanya layar dan (lebar perangkat: 768px); " serta "@import url (" desktop.css ") bukan layar dan (lebar perangkat: 768px);"
testndtv
Tidak yakin apakah saya perlu melakukan sesuatu tambahan juga .. Selain itu termasuk skrip ..
testndtv
Harap Perhatikan bahwa ini tidak berfungsi pada css yang diimpor. coba ini: <link rel = "stylesheet" type = "text / css" media = "bukan layar dan (lebar perangkat: 768px)" href = "desktop.css" />
Faraz Kelhini
oh ok..aku mengerti. Sebenarnya dalam kasus itu, mungkin tidak membantu saya, karena saya mencari sesuatu tanpa melakukan apa pun pada halaman ..yaitu hanya secara eksternal di CSS ..
testndtv
Script googletrunk css3 js menentukan bahwa itu hanya bekerja dengan mediaquery yang digunakan di dalam stylesheet CSS, daripada secara eksternal seperti 'hanya layar dan ....'. Ini berarti Anda harus menyatukan stylesheet Anda menjadi satu dan di dalamnya melakukan apa yang ingin Anda lakukan secara eksternal: Layar @ media dan (max-width: 980px) {
Capagris
11

Diambil dari halaman proyek css3mediaqueries.js.

Catatan: Tidak berfungsi pada stylesheet @ import'ed (yang seharusnya tidak Anda gunakan karena alasan kinerja). Juga tidak akan mendengarkan atribut media <link>dan <style>elemen.

Bayo
sumber
+1 untuk memberi tahu saya bahwa tidak berfungsi pada stylesheet @importeded! Hemat saya banyak waktu di tema WP anak saya.
Vinicius Garcia
8

Cara mudah untuk menggunakan css3-mediaqueries-js adalah dengan memasukkan yang berikut sebelum tag body penutup:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
Ben C
sumber
6

Jawaban yang diedit: IE memahami hanya layar dan cetak sebagai media impor. Semua CSS lain yang disertakan bersama dengan pernyataan impor menyebabkan IE8 mengabaikan pernyataan impor. Peramban GECa seperti safari atau mozilla tidak memiliki masalah ini.

sra
sumber
IE saya tidak dalam mode kompatibilitas .. Juga ada alternatif lain untuk IE .. Pada dasarnya saya hanya ingin memilih semuanya kecuali perangkat layar 768px ..
testndtv
Juga seperti yang dibahas pada tautan yang Anda berikan, saya mencoba mengatur doctype sebagai <! DOCTYPE html PUBLIK "- // W3C // DTD XHTML 1.0 Transisi // EN" " w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> ... Masih tidak berfungsi ..
testndtv
1
Saya tidak yakin jika saya membuat Anda benar. Anda dapat menggunakan JavaScript untuk mendeteksi resolusi layar? Dengan CSS tidak ada cara lain. Apakah Anda yakin Anda tidak memiliki kesalahan terkait dengan apa yang menyebabkan min menjadi override atau diabaikan. Tip yang didapat adalah toolbar pengembang. Dengan itu Anda dapat menguji hidup tanpa pagereloads
sra
Beralih ke mode quirk sangat cepat, apakah Anda memeriksanya? Itu juga dapat menyebabkan hasil yang tidak diinginkan. Quirkmode akan menimpa dokumen Anda. Juga merupakan praktik dewa untuk menguji apa yang Anda inginkan dalam proyek super kecil untuk memastikan bahwa itu bukan kesalahan / hasil yang terkait
sra
ok..Inilah cara saya memperbarui sekarang ... Saya memiliki common.css dan di dalamnya saya katakan; ... @import url ("desktop.css") layar; @import url ("ipad.css") hanya layar dan (lebar perangkat: 768px); Tidak yakin apakah pendekatan ini benar, tetapi berfungsi untuk desktop (IE / FF) dan juga iPad. Bisakah ada beberapa masalah dengan pendekatan ini?
testndtv
6

Kueri media sama sekali tidak didukung di IE8 dan di bawah ini.

Solusi berbasis Javascript

Untuk menambahkan dukungan untuk IE8, Anda dapat menggunakan salah satu dari beberapa solusi JS. Misalnya, Tanggapi dapat ditambahkan untuk menambahkan dukungan permintaan media hanya untuk IE8 dengan kode berikut:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries adalah pustaka lain yang melakukan hal yang sama. Kode untuk menambahkan pustaka itu ke HTML Anda akan sama:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Alternatifnya

Jika Anda tidak menyukai solusi berbasis JS, Anda juga harus mempertimbangkan untuk menambahkan stylesheet IE <9 only di mana Anda menyesuaikan styling khusus untuk IE <9. Untuk itu, Anda harus menambahkan HTML berikut ke kode Anda:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Catatan :

Secara teknis, ini satu alternatif lagi: menggunakan peretasan CSS untuk menargetkan IE <9. Ini memiliki dampak yang sama dengan stylesheet IE <9 saja, tetapi Anda tidak perlu stylesheet terpisah untuk itu. Saya tidak merekomendasikan opsi ini, karena mereka menghasilkan kode CSS yang tidak valid (yang merupakan salah satu dari beberapa alasan mengapa penggunaan peretasan CSS umumnya disukai hari ini).

John Slegers
sumber
5

Sebelum Internet Explorer 8 tidak ada dukungan untuk pertanyaan Media. Tetapi tergantung pada kasus Anda, Anda dapat mencoba menggunakan komentar bersyarat untuk hanya menargetkan Internet Explorer 8 dan lebih rendah. Anda hanya perlu menggunakan arsitektur file CSS yang tepat.

pengguna1105491
sumber
4

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Saya menggunakan @media \0screen {}dan berfungsi dengan baik untuk saya di NYATA NYATA.

sgarbesi
sumber
Aturan gaya yang didefinisikan dalam blok itu hanya akan diterapkan di IE8, browser lain akan mengabaikannya .
Luca
@Luca Selain itu, tidak memungkinkan untuk menentukan min-width, max-width, dll.
John Slegers
3

IE tidak menambahkan dukungan permintaan media hingga IE9. Jadi dengan IE8 Anda kurang beruntung.

Boris Zbarsky
sumber