#8 2021年3月にツイートしたHTML/CSS/JavaScriptのTipsまとめ
2021 年 3 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。
<popup>要素
1.MicrosoftEdgeのGithub でドロップダウンメニューや使い方のヒントなどをまとめて使える <popup>
要素が策定中です。
<blockqoute>要素の多言語対応
2.content
プロパティに open-quote
と close-quote
を指定することで、html
要素の lang
属性に応じて引用符が自動で切り替わるようになります。
<html lang="ja"> |
<html lang="en"> |
<html lang="fr"> |
---|---|---|
「引用ブロック」 | “引用ブロック” | «引用ブロック» |
<blockquote>引用ブロック</blockquote>
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
lang
属性は個別に指定することもできます。
<blockquote lang="ja">引用ブロック</blockquote>
<blockquote lang="en">引用ブロック</blockquote>
<blockquote lang="fr">引用ブロック</blockquote>
また、行内の引用の場合は q
要素を使えば、CSS を使わなくても lang
属性に応じて自動で切り替わります。
:user-(in)valid擬似クラス
3.:(in)valid
擬似クラスの場合は入力中であってもリアルタイムでバリデーションされてしまいますが、:user-(in)valid
擬似クラスを使うと入力を終えてからバリデーションできます。
<input type="email">
<span></span>
input:user-invalid + span::before {
content: '値が正しくありません';
}
すでに Firefox では :-moz-ui-(in)valid
として実装されており、Firefox 88 から正式に実装されています。
:user-(in)validのPolyfill
4.:user-(in)valid
擬似クラスは現在 Firefox 以外では対応していないため、現在のブラウザでも使える方法を考えました。
<input type="email" name="email" placeholder=" " required>
<p>正しいメールアドレスを入力してください。</p>
p {
display: none;
}
// 入力確定後、無効な値のときに適用されるスタイル
input:not(:focus):not(:placeholder-shown):invalid {
border-color: red;
}
input:not(:focus):not(:placeholder-shown):invalid ~ p {
display: block;
}
// 入力確定後、有効な値のときに適用されるスタイル
input:not(:focus):not(:placeholder-shown):valid {
border-color: green;
}
placeholder=" "
を指定すると :placeholder-shown
擬似クラスが使えるようになるのでそれを利用しています。
prefers-contrastメディアクエリ
5.コントラスト比に関する設定を取得できる prefers-contrast
メディアクエリは現在 Safari Preview 版で実装されています。
@media (prefers-contrast: less) {
// コントラスト比が低い方を好む設定のとき
}
@media (prefers-contrast: more) {
// コントラスト比が高い方を好む設定のとき
}
MacOS版Chromeのスクロールバーの色
6.MacOS 版 Chrome のスクロールバーの色は html
または body
要素の background-color
によって決まります。
html {
background-color: blue;
}
body {
background-color: white;
}
なので、html
要素に青の背景色を指定するとスクロールバーの色は半透明の白色となります。そして、body
要素には白の背景色が指定されているため、この場合はスクロールバーが見えなくなってしまうので注意が必要です。
:focus-visibleがデフォルトに
7.Chrome 90 から :focus-visible
擬似クラスでの指定がデフォルトとなり、キーボード以外でフォーカスされた場合にフォーカスリングを消す指定が必要なくなります。
:focus:not(:focus-visible) {
outline: 0;
}
ドーナツセレクタ
8.<article>
の子孫要素である <p>
のうち、<blockquote>
の子孫要素でないものが選択されます。
<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<article>
<h2>遁げた山羊</h2>
<p>五月のしまいの日曜でした。</p>
<blockquote>
<p>わたくしは賑にぎやかな市の教会の鐘の音で眼をさましました。</p>
</blockquote>
<p>もう日はよほど登って、まわりはみんなきらきらしていました。</p>
</article>
<blockquote>
<p>時計を見るとちょうど六時でした。</p>
</blockquote>
article p:not(blockquote *) {
background-color: yellow;
}
Array.from()の第2引数
9.Array.from()
の第 2 引数には map()
関数を指定できるため、Array.from().map(v => {})
のようにする必要はありません。
const headings = document.querySelectorAll('h2')
const toc = `<ul>${Array.from(headings, heading => `<li>${heading.textContent}</li>`).join('')}</ul>`
console.log(toc)
// => <ul>
// => <li>...</li>
// => <li>...</li>
// => <li>...</li>
// => </ul>
Object.hasOwnProperty()とその注意点
10.Object.hasOwnProperty()
は for...in
ループで継承プロパティを除外するときによく使われます。
// プロトタイプ
function Person(name) {
this.name = name
}
// プロトタイプにプロパティを追加
Person.prototype = {
age: 25,
gender: 'male',
}
// インスタンス生成
const bob = new Person('Bob')
for (const key in bob) {
if (!bob.hasOwnProperty(key)) {
// Personプロトタイプの継承プロパティである
// ageとgenderは無視
continue
}
// nameプロパティだけ出力される
console.log(key)
}
Object.create(null)
で生成した場合は、hasOwnProperty()
関数をもたないため、エラーとなります。
const bob = Object.create(null)
bob.name = 'Bob'
for (const key in bob) {
// TypeError: bob.hasownproperty is not a functionを回避
if (!Object.prototype.hasOwnProperty.call(bob, key)) {
continue
}
// nameプロパティが出力される
console.log(key)
}
その場合は、Object.prototype.hasOwnProperty.call
というように直接呼び出せば使えます。
fs.promises.readFileとfs.readFile
11.Node.js の fs.promises.readFile()
は fs.readFile()
よりも 40% 遅い!?
ress
12.モダンな CSS リセットライブラリです。
conic.css
13.conic-gradient()
を使った美しいグラデーション集です。
postcss-aspect-ratio-polyfill
14.自作の aspect-ratio
プロパティをすべてのブラウザで使えるようにする PostCSS プラグインです。
simple-keyboard
15.軽量でカスタマイズしやすい仮想キーボードライブラリです。
quickmenu
16.モバイル向けのナビゲーションメニューライブラリです。
tagify
17.タグ型の input
要素を実装できるライブラリです。
lite-youtube-embed
18.YouTube 動画の埋め込みを 224 倍高速化できるライブラリです。
element-resize-detector
19.要素単位でリサイズを検知できるライブラリです。
fast-json-stringify
20.2 倍高速な JSON.stringify()
ライブラリです。
Svelte NodeGUI
21.HTML/CSS/JavaScript でクロスプラットフォームなデスクトップアプリを作れるフレームワークです。Electron のブラウザベースな実装と違って Qt5 を使っているのでメモリなどのパフォーマンスも良さそうです。
web-minecraft
22.Web 上で Minecraft を実装できるライブラリです。
CSS Shadows Generator
23.ベジェ曲線を使って滑らかな影を実装できるオンラインジェネレーターです。
Fancy Border Radius Generator
24.border-radius
を使って変わった形を作れるオンラインジェネレーターです。
Cubic Bezier Generator
25.cubic-bezier()
関数をより直感的に生成できるオンラインジェネレーターです。
Easing Gradient Generator
26.滑らかなグラデーションを生成できるオンラインジェネレーターです。
Neumorphism.io
27.
Neumorphic Generator
28.
Neumorphism UI
29.
Glassmorphism Generator
30.
avif.io
31.あらゆる画像を AVIF 形式に変換できるオンラインサービスです。
Discussion