というわけで 年末なので メディアクエリ全部捕捉します。
レギュレーション
MDN の @media にあるメディア種別(Media types) 及び メディア特性(Media features)を全て補足して表示するページを作ります。
※ただし、廃止されたものは除く
対応範囲
-
メディア種別
- all
- screen
- speech
- メディア特性
- any-hover
- any-pointer
- color
- color-gamut
- color-index
- display-mode
- dynamic-range
- grid
- forced-colors
- height
- hover
- inverted-colors
- monochrome
- orientation
- overflow-block
- overflow-inline
- pointer
- prefers-color-scheme
- prefers-contrast
- prefers-reduced-data
- prefers-reduced-transparency
- resolution
- scripting
- update
- video-dynamic-range
- width
で、出来上がったものがこれとなります。
できあがったもの
See the Pen メディアクエリの値全部見る by juner clarinet (@juner) on CodePen.
メディア種別 や メディア特性 は 値の取り方で概ね値の取り方に二つの方法があり、それにより表示方法を変えています。
値が決まっているもの
メディア種別 や color-gamut
や any-hover
など、 値が決まっているものです。
これは全てメディアクエリで検知して表示すればこと足ります。
<div class="select">
any-hover:
<span id="any-hover"><span class="none">none</span><span class="hover">hover</span></span>
</div>
:where(#any-hover) {
.none {
display: none;
@media (any-hover: none) {
display: initial;
}
}
.hover {
display: none;
@media (any-hover: hover) {
display: initial;
}
}
@media (any-hover: none) or (any-hover: hover) {
--not-work: none;
}
}
.select {
--not-work: "not work";
[id] {
&::before {
color: var(--not-work-color);
background: var(--not-work-bg-color);
content: var(--not-work);
display: inline;
padding-inline: 0.5em;
}
}
}
--not-work は 未対応対策です hit したら 表示を解除します
勿論 grid や monochrome 等の 0 か 1 しかとらないものも含みます。
値がある程度の範囲を持つもの
width や height 及び color 等がそれです。
この場合は元ネタとなる数値を js で取得した上で メディアクエリを発行して変更されたらまた取得して設定みたいなことをする必要がある為、次の様になります。
<div class="value">resolution: <span id="resolution"></span></div>
.value {
--not-work: none;
[id] {
&:empty {
--not-work: "not work";
}
&::before {
color: var(--not-work-color);
background: var(--not-work-bg-color);
content: var(--not-work);
display: inline;
padding-inline: 0.5em;
}
}
}
// #region resolution
checkStart({
name: "resolution",
get: () => `${globalThis.devicePixelRatio}dppx`,
set: (value) => {
const resolution = document.getElementById("resolution");
resolution.textContent = value;
},
toQuery: (value) => `(resolution: ${value})`,
});
// #endregion
/**
* メディアクエリを取得してその更新を待機する
* @param {{
* name: string;
* get: () => string;
* set: (t:string) => void;
* toQuery: (t:string) => string;
* }}
*/
async function checkStart({ name, get, set, toQuery }) {
if (!get) throw new Error("required options.get parameter");
if (!set) throw new Error("required options.set parameter");
if (!toQuery) throw new Error("required options.set parameter");
/** @type {string} */
let value;
const change = () => {
const once = true;
const { promise, resolve } = Promise.withResolvers();
const query = toQuery(value);
const media = globalThis.matchMedia(query);
media.addEventListener("change", resolve, { once });
return promise.then(() => true);
};
try {
do {
value = get();
set(value);
} while (await change());
} catch (e) {
console.error("%o %o", name, e);
}
}
メディアクエリ と 実際の値を司るプロパティ
css メディアクエリ名 | js プロパティ |
---|---|
resolution | globalThis.devicePixelRatio (dppx) |
width | globalThis.innerWidth |
height | globalThis.innerHeight |
color | globalThis.screen.colorDepth |
color-index | なし |
そう……問題点は…… color-index メディアクエリに対応した js 側のプロパティが無いということです。
ただ、 メディアクエリで 現在の値がそうかどうかは確認できます。
現在の値から超えているか 、現在の値よりも少ないかはわかります。
というわけで color-index は 二分探索法で 探すことにしました。
color-index は二分探索法で実際の値を測定
イテレータは next() メソッドに引数を渡せるのをご存じでしょうか?
それを使えば 範囲を対話で絞り込むだけのイテレータを作成することができます。
二分探索法のやり方については他の文書を読めばわかると重いので省略します。
// #region color-index
{
const maxColorIndex = 100000000000;
checkStart({
name: "color-index",
get,
set,
toQuery,
});
function get() {
const min = 0;
const max = maxColorIndex;
if (match(min)) return `${min}`;
if (match(max)) return `${max}`;
const ite = find(min, max);
/** @type {number|undefined} */
let comp;
try {
do {
const { value: index, done } = ite.next(comp);
if (done) break;
comp = compare(index);
if (comp === 0) return `${index}`;
} while (comp !== 0);
throw new Error(`not found color index ${min} ~ ${max}`);
} finally {
if (ite.return) ite.return(undefined);
}
/**
* @param {number} index
* @returns {1|0|-1}
*/
function compare(index) {
if (match(index)) return 0;
if (globalthis.matchMedia(`(color-index < ${index})`).matches) return -1;
return 1;
}
/**
* @param {param} index
* @returns {boolean}
*/
function match(index) {
return globalThis.matchMedia(toQuery(index)).matches;
}
}
function toQuery(value) {
return `(color-index: ${value})`;
}
function set(value) {
const colorIndex = document.getElementById("color-index");
colorIndex.textContent = value;
}
/**
* 二分探索法で値を探すイテレータ
* @param {number} min
* @param {number} max
* @returns {Iterator<number, undefined, number | undefined>}
*/
function* find(min, max) {
let half;
while (min < max) {
half = Math.ceil((max + min) / 2);
const result = yield half;
if (result === 0) return;
if (result > 0) {
if (min === half) return;
min = half;
continue;
}
if (result < 0) {
if (max === half) return;
max = half;
continue;
}
throw new Error("unkown result value");
}
return;
}
}
// #endregion
以上。