随笔分类 - HTML 5
摘要:An absolute URL - points to another web site (like href="http://www.example.com/default.htm") A relative URL - points to a file within a web site (lik
阅读全文
摘要:HTMLCollection The HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) a
阅读全文
摘要:The difference between document.body and document.documentElement: document.body returns the <body> elementdocument.documentElement returns the <html>
阅读全文
摘要:<style> dt { position: sticky; top: 0; } </style> <body> <dl> <dt>A</dt> <dd>Adrew W.K</dd> <dd>Adapter</dd> <dt>B</dt> <dd>Border</dd> <dd>Beef</dd>
阅读全文
摘要:Normal browser has restiction that doesn't allow you automaticlly play the video, unless your site has high Media Enagement index (MEI). There are 2 w
阅读全文
摘要:const installedApps = await navigator.getInstalledRelatedApps() const packageId = "com.app.pwa" const app = installedApps.find(app => app.id packageId
阅读全文
摘要:Solution 1: consider change font-size to 16px or above Soution 2: using javascript if(navigator.userAgent.indexOf('iPhone') > -1 ) { document .querySe
阅读全文
摘要:Morden browser apply noopenerfor you, but for lagacy browser might not. What noopenerdoes is that, it set window.openerto null, which can prevent evil
阅读全文
摘要:default-src "none"; script-src "self"; img-src "self" example.com; style-src fonts.googleapis.com; font-src fonts.gstatic.com; <script src="/js/app.js
阅读全文
摘要:On mobile device, when you open / close the keyboard, zoom in / out, it might affect the visual viewport view (the actual page content); to detect cha
阅读全文
摘要:In this lesson, we are using HTML, accessibility concepts, and ARIA attributes to improve the time scrubber feature of an audio player. The goal is to
阅读全文
摘要:Binding to Media Events import './assets/css/style.css'; import autumnMp4 from './assets/media/autumn.mp4'; const app = document.getElementById('app')
阅读全文
摘要:<!-- normal list --> <ul> <li>Here's a thing</li> <li>Another thing</li> <li>More things</li> <li><a href="#">A link in a thing</a></li> </ul> <!-- or
阅读全文
摘要:https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript HTML5 APIs
阅读全文
摘要:The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies
阅读全文
摘要:const initPageVisibility = () => { setInterval(() => console.log(document.visibilityState), 1000) } if ('visibilityState' in document) { initPageVisib
阅读全文
摘要:Most of the time,we use DOMElement.click(): button.click() Actually it is a shortcut for: button.dispatchEvent( new MouseEvent('click', { bubble: true
阅读全文
摘要:Using the https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API(Web Speech API) it is possible to use speech synthesis in the browser withou
阅读全文
摘要:import './assets/css/style.css'; const app = document.getElementById('app'); app.innerHTML = ` <div class="todos"> <div class="todos-header"> <h3 clas
阅读全文
摘要:const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript DOM</h1> <form name="order"> <label> Your name <input type="text" name="f
阅读全文