<div class="search-box" role="search"> <form action="/search"> <p><input type="search" name="q"> <input type="submit" value="搜索!"></p> </form> </div>注意,在第一行代码中我们必须要加一个 role="search" ,不然用户是没办法正常使用搜索功能的。
<search> <form action="/search"> <p><input type="search" name="q"> <input type="submit" value="搜索!"></p> </form> </search>新的 Popover 属性
manual:没有自动关闭行为。
<button popovertarget="info-box" popovertargetaction="show">More info</button> <article id="info-box" popover="auto"> <h2>我是一个弹出窗口</h2> <p>你好我是 ConardLi ,我今年 17 岁 。</p> <button popovertarget="info-box" popovertargetaction="hide">Close</button> </article>就这样,在不使用 JS 的情况下就可以实现一个简单的弹出窗口,并且它可以提供非常好的可访问性(无障碍)。另外,JavaScript 还提供了 showPopover()、hidePopover() 和 togglePopover() 等专门用于实现弹出窗口的 API。
article { font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; font-size: 1.7rem; font-size-adjust: from-font; } article code { font-family: "Courier New", monospace; }
@counter-style upper-serbian { system: alphabetic; symbols: 'А' 'Б' 'В' 'Г' 'Д' 'Ђ' 'Е' 'Ж' 'З' 'И' 'Ј' 'К' 'Л' 'Љ' 'М' 'Н' 'Њ' 'О' 'П' 'Р' 'С' 'Т' 'Ћ' 'У' 'Ф' 'Х' 'Ц' 'Ч' 'Џ' 'Ш'; } ol { list-style: upper-serbian; }
main { background-image: image-set( url("images/17.jxl") type("image/jxl"), url("images/1717.avif") type("image/avif"), url("images/171717.jpeg") type("image/jpeg") ); }JavaScript
if (navigator.storage && navigator.storage.estimate) { const storageEstimate = await navigator.storage.estimate(); const availableSpace = storageEstimate.quota > storageEstimate.usage ? storageEstimate.quota - storageEstimate.usage : 0; }当网站的存储模式为持久时,存储数据不会被清理。我们可以使用 navigator.storage.persisted() 来检查网站的存储模式,如果想要将模式更改为持久,可以使用 navigator.storage.persist()。
if (navgator.storage && navigator.storage.persisted) { const persistent = await navigator.storage.persisted(); if (!persistent && navigator.storage.persist) const result = await navigator.storage.persist(); }Canvas 离屏渲染
var one = document.getElementById("one").getContext("bitmaprenderer"); var two = document.getElementById("two").getContext("bitmaprenderer"); // 堆代码 duidaima.com var offscreen = new OffscreenCanvas(256, 256); var gl = offscreen.getContext("webgl"); var bitmapOne = offscreen.transferToImageBitmap(); one.transferFromImageBitmap(bitmapOne); var bitmapTwo = offscreen.transferToImageBitmap(); two.transferFromImageBitmap(bitmapTwo);Set 新方法
const setA = new Set(["apples", "oranges", "grapes"]); const setB = new Set(["bananas", "grapes", "apples"]); // Union into single set const union = setA.union(setB); // Interection "apples" and "grapes" const intersect = setA.intersection(setB); // Difference "oranges" const diff = setA.difference(setB);
// These return true only when the updated API is supported! function supportsUpdatedURLHasMethod() { const param = new URLSearchParams({ key: "value" }); return param.has("key", "does not exist") === false; } function supportsUpdatedURLDeleteMethod() { const param = new URLSearchParams({ key: "value" }); param.delete("key", "does not exist"); return param.has("key"); }