まあまあ使ったことある気がするのにnth-child系はクラス名を起点に使えることを知らなくて衝撃を受けた。いかにこれまで雰囲気で使ってたかがよくわかる… CSSの :nth-child、:nth-of-type などにクラス名を使う落とし穴 | PisukeCode - Web開発まとめ Cでは…

https://lopan.jp/about-svg/filter/ SVGにはフィルタというものがあり、自分でSVG内にフィルタを組み合わせたものを一つの要素のように定義してidを割り振る。これをCSSで指定することで指定の要素にフィルタをかけることができる。すごい。ただしフィルタ…

coliss.com 100vhが100vhじゃない問題、これでSafariでも簡単に画面いっぱいの高さを設定できる

web.dev SVGがインラインでCSS持てるの知らなかった この特性を使って、ダークモードなどのテーマの好みに合わせてfavioconをカスタマイズすることができるという小技 www.youtube.com Corporate Engineer はやっぱりユーザーが身近にいるというのが強そう …

携帯では上下、PCでは右左としたい場合にメディアクエリを使わず wrap と min-width と flex-basis/grow を組み合わせて実現することも可能。[Every Layout]

developer.mozilla.org - ページの最上部または最下部に達したときのあの跳ね返るような挙動とかをコントロールできるプロパティがあるの知らなかったなー

requestAnimationFrame が main スレッドなのに対してCSS アニメーションは別スレッド (composite スレッド)なので早い AfterEffects+lottie-webなどと比べると単位が固定じゃないのでレスポンシブ対応しやすい border は小数点単位の描画ができないのでアニ…

Sass: @use @useを使うとうっかり二重ロードしてしまうことが無くなったり、標準でnamespaceが付くからユニークになるように配慮した変数名を付けなくても良くなるとかの利点があるらしい

Learning from the session Canvas is not accessible, so we should use SVG for meaningful data such as graphs as much as possible It's possible to add markup in canvas tag as fallback set role="img" and use aria-label. Update img.alt or othe…

visibility は数値じゃないけど transition が使える

PWAを一旦ホーム画面に保存して、ページの一番上が表示されている時(スクロールしていない状態)で上から下に引っ張る(スワイプする？に入るのかなこれも)と上部に謎の空白ができるんだけど、多分これはアプリとかで上から下に引っ張るとページを更新するPull…

色々書き比べた結果Tailwind CSSにしたという話 - Qiita メジャーな方法をいくつか紹介してからの流れで出してくれたのでそれぞれの良さとか違いがわかりやすいとても良い記事だった やっぱりアーティスティックな感じのUIは厳しいんだなと思うが、そもそも…

.top * + * { margin-top: 1.5em; } これぱっと見せられたら一瞬考えてしまう、特に+とかほとんど使わないので topクラスを持つ要素の子or孫要素の中で、何かしらの要素の兄弟要素にのみmarginをつける(つまりfirst-childにつかない)と言うこと

Compat2021: Eliminating five top compatibility pain points on the web Aspect-ratioはやく心置きなく使いたいからこれはありがたい gridでアニメーションできる(ブラウザによるけど)のは知らなかった Recreating the Fool's Mate chess move with CSS Gr…

:focus-visible - CSS: カスケーディングスタイルシート | MDN キーボードでfocusした時のみ、みたいなことができるらしい 知らなかった…！

CSS3D！まるでWebGLのような3Dを超気軽に実装するCSS技 3D感を出すにはtransform-style: preserve-3dが必要。これないとrotateとかで奥行き込みの回転させてもペラッペラになる

lru_cache 自分でtableとかsetとか用意しなくてもmemo化できる機構があるとは…dequeもあるしいわゆるLeetcode的な問題を解くのにPythonが人気なのもわかるなあ Making GitHub’s new homepage fast and performant - The GitHub Blog SVGでmaskできるの知らな…

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA 和文フォントに慣れすぎているのか、詰まっている方にむしろ違和感を感じてしまう 数字との抱き合わせでズレるとかの調整には使えそう、でも今ま…

100 Days of CSS カーソルにくっついてくるタイプのアニメーション。正解と照らし合わせたいところ 波紋のように広がる輪っか。wrapperに作成してドットをabsoluteで中央配置？scaleで広げてopacityで消滅 →:afterでborderをアニメーションさせてた。なるほ…

ページ内でidを使ってジャンプ(スクロール)した時に指定した要素事態が画面外にいってしまう問題は、negative marginと同じ高さのpaddingを設定することでいい感じに位置を調節することができる。

CSS Animation animation-directionにalternateを設定すると、0 -> 100% と100% -> 0の両方向で再生できる

CSS Logical Properties 例えばmargin-startはテキストが縦書きか横書きかで指定される場所が変わる。論理的ってそういうことかー 【JavaScript】FetchAPIとaxiosの違いって？機能やメリットを比較 私は素でfetchAPI使って実装したことがない(axiosも)ので何…

ダークモード対応 JSでOSのダークモードの設定を取得するには、メディアクエリをmatchMediaで読むのが良いらしい: 参考

CSS変数とSass変数 Sass変数はあくまでコンパイル前までしか存在しないのでランタイムで動的にテーマ切り替えとかができない 切り替え可能なダークモードの実装とかにはCSSh変数の方が適していそう

Angular: Eliminate Render Blocking Requests の概要 | <output type=text> - GoogleFontを<link>で読まずにstyle in headerのfont-faceで読み込めばCSSを読み込んでからwoffを読みにいっていたのがwoffだけ読みに行けばいいからHTTPのラウンドトリップを削減できるというのはなるほ</link></output>…

開発者のオンボーディング時間を10x短縮する方法 | HiCustomer Lab - HiCustomer Developer's Blog 入れたいけど全員に入れてもらうのは気が引けるものをいれやすくなるのは地味に大きなメリットである気がする Intermediate CSS inline style is hard to ov…

Reactのref ChildAのrefをParent経由でChildBに渡したいときは普通にpropsとして渡して、ChildB内でuseStateに突っ込んでイベント時に更新して使うことになるのかなあ、HTML内で使おうと思うと最初にもらったやつそのままセットしたらnullのまま更新されない…

youtu.be 複数行に渡るときに最初の行と最後の行のline-heightのはみ出しだけ無効にするためにnegative marginを使う、なるほど 『リングフィット アドベンチャー』初歩的な方法と膨大なログの中にこそお宝が！ ゲーム開発を円滑に進めるためのprintf活用術…

Web Speed Hackathon Online 出題のねらいと解説 そのほかモジュールのtreeshake化 webpackのproduction mode (optimization config) 画像をwebpにする 画像をデバイスで出しわける キャッシュ 画像のサイズ最適化 brotli使うとか ホストサーバーの場所など …

モバイルだと、アドレスバーの高さの分100vhを設定しても高さがずれてしまうため画面ぴったりにしたい時はカスタムのCSS変数を設定する方が良い。window.innerHeightあたりをJSでとって100で割ったものを指定してあげる。