書いてる人:myakura (Masataka Yakura)
Chrome Dev Summit 2020の前後でGoogleのひとが公開した記事を、やる気の続く限り読んで書いたメモ。
主にみているのは以下のサイト。
書いてる人:myakura (Masataka Yakura)
Chrome Dev Summit 2020の前後でGoogleのひとが公開した記事を、やる気の続く限り読んで書いたメモ。
主にみているのは以下のサイト。
これまではインラインレベル要素とブロックレベル要素といった大まかな定義でしたが、細かくなりました。
HTML5の内容モデルは「なんとかcontent」ってついてます。
// haven't tested yet | |
const jsdom = require('jsdom') | |
const url = process.argv[2] | |
jsdom.env(url, (err, window) => { | |
const images = Array.from(window.document.querySelectorAll('img[src]')) | |
const result = [] | |
for (let i of images) { | |
result.push({ |
タッチの検出:「どう」ではなく「なぜ」 | |
<p>原文:<a href="https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/">Detecting touch: it’s the ‘why’, not the ‘how’</a> by Patrick H. Lauke and Robert Nyman [Editor] on April 9, 2013</p> | |
<p>One common aspect of making a website or application “mobile friendly” is the inclusion of tweaks, additional functionality or interface elements that are particularly aimed at touchscreens. A very common question from developers is now “How can I detect a touch-capable device?”</p> | |
<p>Web サイトや Web アプリケーションをモバイル対応するにあたり、共通して見られるaspectのひとつに、タッチスクリーンを対象にした機能追加や対処があります。こういったこともあり、開発者から「どうやってタッチ可能なデバイスを検出するの?」という質問がよく投げられます。</p> | |
<h2>タッチ機能の検出 | |
Feature detection for touch</h2> |
@charset "UTF-8"; | |
// Sass list extra functions v0.0.1 | masataka yakura | MIT License | |
// determines whether an argument is a list type | |
// @return {boolean} | |
@function is-list($arg) { | |
@return type-of($arg) == 'list' or type-of($arg) == 'arglist'; | |
// ISSUE: "false negative" with a single value wrapped in parens | |
// since "Sass doesn't use () as list delimiter characters." |
@mixin lg-keyword($keyword, $colorstops...) { | |
$prefixes: '-webkit-'; | |
// 標準のキーワード | |
$standard_keywords: | |
to bottom, to left, to top, to right, | |
to top left, to top right, to bottom right, to bottom left, | |
to left top, to right top, to right bottom, to left bottom; | |
// 接頭辞版のキーワード |
{"2":"color","3":"direction","4":"display","5":"font","6":"font-family","7":"font-size","8":"font-style","9":"font-variant","10":"font-weight","11":"text-rendering","12":"webkit-font-feature-settings","13":"webkit-font-kerning","14":"webkit-font-smoothing","15":"webkit-font-variant-ligatures","16":"webkit-locale","17":"webkit-text-orientation","18":"webkit-writing-mode","19":"zoom","20":"line-height","21":"background","22":"background-attachment","23":"background-clip","24":"background-color","25":"background-image","26":"background-origin","27":"background-position","28":"background-position-x","29":"background-position-y","30":"background-repeat","31":"background-repeat-x","32":"background-repeat-y","33":"background-size","34":"border","35":"border-bottom","36":"border-bottom-color","37":"border-bottom-left-radius","38":"border-bottom-right-radius","39":"border-bottom-style","40":"border-bottom-width","41":"border-collapse","42":"border-color","43":"border-image","44":"border-image-outset","45":"border-imag |