Saya mencoba menggunakan variabel CSS dalam kueri media dan tidak berfungsi.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
Saya mencoba menggunakan variabel CSS dalam kueri media dan tidak berfungsi.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
Jawaban:
Dari spec ,
Jadi tidak, Anda tidak dapat menggunakannya dalam kueri media.
Dan itu masuk akal. Karena Anda dapat mengatur
--mobile-breakpoint
misalnya untuk:root
, yaitu<html>
elemen, dan dari sana diwariskan ke elemen lain. Tapi kueri media bukan elemen, tidak diwarisi dari<html>
, jadi tidak bisa.Ini bukan yang ingin dicapai oleh variabel CSS. Anda dapat menggunakan preprocessor CSS sebagai gantinya.
sumber
Saat Oriol menjawab , saat ini, Variabel CSS Level 1
var()
tidak dapat digunakan dalam kueri media . Namun, ada perkembangan terbaru yang akan mengatasi masalah ini. Dalam beberapa tahun, setelah Modul Lingkungan Variabel CSS Level 1 distandarisasi dan diimplementasikan, kami akan dapat menggunakanenv()
variabel dalam kueri media di semua browser modern.Jika Anda membaca spesifikasi dan memiliki kekhawatiran, atau jika Anda ingin menyuarakan dukungan Anda untuk kasus penggunaan kueri media, Anda masih dapat melakukannya di GitHub w3c / csswg-draft # 1693 atau dalam masalah CSS GitHub apa pun yang diawali dengan β[ css-env-1] " .
Jawaban asli 2017-11-09 : Baru-baru ini, Kelompok Kerja CSS memutuskan bahwa Variabel CSS Level 2 akan mendukung variabel lingkungan yang ditentukan pengguna menggunakan
env()
, dan mereka akan mencoba membuatnya valid dalam permintaan media . Grup menyelesaikan ini setelah Apple pertama kali mengusulkan properti agen-pengguna standar , tak lama sebelum pengumuman resmi iPhone X pada September 2017 (lihat juga WebKit: "Merancang Situs Web untuk iPhone X" oleh Timothy Horton ). Perwakilan browser lain kemudian sepakat bahwa mereka umumnya akan berguna di banyak perangkat, seperti tampilan televisi dan pencetakan tinta dengan tepi yang berdarah. (env()
Dahulu disebutconstant()
, tapi itu sekarang sudah usang. Anda mungkin masih melihat artikel yang merujuk pada nama lama, seperti artikel ini oleh Peter-Paul Koch .) Setelah beberapa minggu berlalu, Cameron McCormack dari Mozilla menyadari bahwa variabel lingkungan ini akan dapat digunakan dalam permintaan media, dan Tab Atkins, Jr. Google kemudian menyadari bahwa variabel lingkungan yang ditentukan pengguna akan sangat berguna sebagai variabel root global, yang tidak dapat ditimpa, yang dapat digunakan dalam permintaan media. Sekarang, Dean βDinoβ Jackson dari Apple akan bergabung dengan Atkins dalam menyunting Level 2.Anda dapat berlangganan pembaruan tentang masalah ini dalam
w3c/csswg-drafts
masalah GitHub # 1693 . (Untuk detail historis yang relevan, perluas log pertemuan yang tertanam dalam resolusi Bot Rapat CSSWG dan cari "MQ", yang merupakan singkatan dari "kueri media".)Saya berencana untuk memperbarui pertanyaan ini di masa mendatang ketika lebih banyak perkembangan terjadi. Masa depan itu menyenangkan.
Pembaruan 2018-02-08 : Safari Technology Preview 49 telah menambahkan dukungan untuk penguraian
calc()
dalam kueri media, yang mungkin merupakan awal untuk mendukungnyaenv()
juga.Pembaruan 2018-04-27 : Tim Chromium di Google telah memutuskan untuk mulai bekerja
env()
. Sebagai tanggapan, Atkins telah mulai menentukanenv()
secara terpisah, rancangan standar tidak resmi: Modul Variabel Lingkungan CSS Level 1 . (Lihat komentar GitHub di w3c / csswg-draft # 1693 dan komentarnya di w3c / csswg-draft # 1817. ) Konsep tersebut memanggil variabel dalam kueri media sebagai kasus penggunaan eksplisit:Jika Anda membaca spesifikasi dan memiliki kekhawatiran, atau jika Anda ingin menyuarakan dukungan Anda untuk kasus penggunaan kueri media, Anda masih dapat melakukannya di GitHub w3c / csswg-draft # 1693 atau dalam masalah CSS GitHub apa pun yang diawali dengan β[ css-env-1] " .
Pembaruan 2019-07-06 : Pekerjaan berlanjut pada spesifikasi. Masalah GitHub # 2627 dan Masalah GitHub # 3578 dikhususkan untuk variabel lingkungan khusus dalam kueri media.
sumber
Apa yang BISA Anda lakukan adalah @ media meminta: pernyataan root Anda!
Sepenuhnya berfungsi di Chrome, Firefox dan Edge setidaknya versi produksi terbaru pada posting ini.
sumber
var
, maka dapat digunakan dalam perhitungan di tempat lain dalamcss
, ini masih memerlukan menempatkan "nilai ajaib" (di sini, 479px) di dua tempat: permintaan media dan deklarasi var.Ternyata tidak mungkin menggunakan variabel CSS asli seperti itu. Itu salah satu batasannya .
Cara cerdas untuk menggunakannya adalah mengubah variabel Anda dalam kueri media, untuk memengaruhi semua gaya Anda. Saya merekomendasikan artikel ini .
sumber
Salah satu cara untuk mencapai apa yang Anda inginkan adalah menggunakan paket npm
postcss-media-variables
.Jika Anda baik-baik saja dengan menggunakan paket npm maka Anda dapat melihat documentatoin untuk hal yang sama di sini
Contoh
sumber
Karena Anda dapat membaca jawaban lain, masih tidak mungkin melakukannya.
Seseorang disebutkan variabel kustom lingkungan (mirip dengan variabel css kustom
env()
bukanvar()
), dan prinsip adalah suara, meskipun masih ada 2 isu utama:sumber
Jawaban singkat
Anda dapat menggunakan JavaScript untuk mengubah nilai kueri media dan mengaturnya ke nilai variabel css.
Jawaban panjang
Saya menulis skrip kecil yang dapat Anda sertakan di halaman Anda. Ini menggantikan setiap aturan media dengan nilai
1px
dengan nilai variabel css--replace-media-1px
, aturan dengan nilai2px
dengan--replace-media-2px
dan sebagainya. Ini bekerja untuk pertanyaan mediawith
,min-width
,max-width
,height
,min-height
danmax-height
bahkan ketika mereka terhubung menggunakanand
.JavaScript:
CSS:
sumber