Intro Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。 Ladybird https://ladybird.org/ これがいかに価値のある取り組みなのか、 Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。 ブラウザエンジンとは ブラウザは、「ブラウザ UI」と「ブラウザエンジン」と、大きく二つの構成要素に分けて考えることができる。 ブラウザエンジンとは、いわゆる Web 標準の技術を片っ端から実装した、ブラウザの土台となるものだ。 ビルドすれば、入力した URL からネットワーク経由でリソースを取得し、パースしてレンダリングして表示できる。そのための IETF RFC や WHATWG HTML や ECMAScript が実装されている、標準技術の結集だ。 その上に、例えばタブ
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
スタイルの適用範囲を限定する CSS の `@scope` ルール 2024.07.07 `@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。
【CSS】z-index管理の3指針
要素の重なりを制御する時に使うCSSと言えばz-indexですが、単純にその値が上下関係になるとは限らない、少しクセのあるプロパティです。Webサイト上の重なりにはスタッキングコンテキストと呼ばれる仕組みがあり、その関係性によってz-indexの値が1でも9999の上にくることがあり得ます。 z-indexとスタッキングコンテキストの関係については次の記事にて解説されています。 この記事では自分の考えたz-index管理についての指針を紹介します。 グローバルな重なりとローカルな重なり Webサイトでの重なり表現には大きく分けて2つあります。ページ全体で重なりを管理したいものと、一部の領域で重なりを管理したいものです。この記事では前者をグローバルな重なり、後者をローカルな重なりと呼ぶことにします。 グローバルな重なりに含まれるのは、追従ヘッダーやモーダル、ハンバーガーメニュー、トースト通知
Interop 2024 mid-year update Stay organized with collections Save and categorize content based on your preferences. As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year. Where we started At the beginning of the year, Chrome had an experimental browser support score of 83. Today that score is 90, with a score for stab
はじめに 下記画像のように、「Aボタン」をクリックすると「A画面」が、 「Bボタン」をクリックすると「B画面」が表示されるような 画面切り替えをJavaScript、HTML、CSS を使って作成していきます。 JavaScript、HTML、CSS ファイルの作成 ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。 HTML の作成 ヘッダーの作成 次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。 <link rel="stylesheet" href="./style.css" /> で style.css に連携。 <script src="./script.js" defer></script> で scr
Chrome チームは、メーソンリー タイプのレイアウトをウェブで実装したいと考えています。しかし、WebKit の最近の投稿で提案されているように、CSS グリッド仕様の一部として実装するのは間違いだと考えられます。また、WebKit の投稿は、誰も提案しなかったメイソン バージョンに反論しているとも考えられます。 そこでこの投稿では、Chrome が CSS グリッド レイアウト仕様の一部としてメーソンリーを実装することに懸念を抱いている理由を説明し、代替案で何が可能になるかを明確にすることを目的としています。要するに、 Chrome チームは、メーソンリーの課題を解消したいと考えています。 グリッドの仕様にメーソンリーを追加する際には、メーソンリーがグリッドであるかどうか以外の理由で問題が生じます。 グリッドの仕様の外部でメーソンリーを定義しても、メーソンリーの複数のトラックサイズ、
コピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクション・「Animata」
Animata Animataはコピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクションです。タイトル通りで、既存のReactアプリ等にコピペでアニメーションコンテンツを追加可能なコンポーネントを手作業でコレクション化したそうです。 いわゆるUIライブラリの類ではなく、既存のプロジェクトにアニメーション要素を加えるスパイス的な役割となっています。尚、基本的にはTailwindベースですが、細かなスタイルは利用者の采配に任せているそうで特に完成度が高かったりスタイルに一貫性があるようなものではありません。 用意されているのは背景や弁当グリッド、ボタン、カード、ナビゲーション、チャートなどで今のところ40程度のコンポーネントが集められています。Reactアプリにエフェクト等を追加する際はご利用になってみては如何でしょうか。ライセンスはM
不可視状態からフェードインする要素を即座にフォーカスする方法
CSSのdisplay: noneやvisibility: hiddenによって不可視状態になっている要素を、表示状態に切り替えてから即座にフォーカスしたいということがある。たとえば、初期状態では非表示になっている検索ボックスを、ユーザーのインタラクションに応じて表示するような場合。そうしたときには、通常、スタイルを切り替えてすぐにfocusメソッドを呼び出すだけで良い。 <input type="search" /> input[type='search'] { display: none; &.open { display: revert; } } const searchBoxElement = document.querySelector('input[type="search"]'); function open() { searchBoxElement.classList.ad
Do You Still Need Sass? 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。Sassを置き去りにするほど十分に進化したのでしょうか？ Sassは長年、フロントエンド開発の定番でした。最初から、CSSに機能を追加し、開発者体験を向上させ、フロントエンドコードをより保守しやすくするのに役立ちました。 しかし、まだ必要なのでしょうか？2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。 2024年のネイティブCSSは何ができるのか？ カスタムプロパティ（またはCSSカスタム変数） ネイティブCSSでの計算 カラー関数 ネスティング PostCSSを使用して今後の機能を実装する 将来のCSS構文を持つプラ
【CSS】FlexboxとGridの使い分けについて解説
この記事では「FlexboxとGrid Layoutの使い分け」について解説します。 FlexboxもGrid Layoutも要素を縦横好きなように配置できるので便利です。それぞれ向き、不向きがあるので、特徴を理解して使い分ける必要があります。 それぞれの特徴について解説していきます！ Flexboxとは FlexboxはCSS3で追加されたもので、柔軟性のある（フレキシブル）なレイアウトを実現することができます。 Flexboxでは、display: flex;と組み合わせて要素を左右中央寄せしたり、右寄せにしたりできます。ポイントとしては横並びさせたい要素の「親要素」にdisplay: flex;を指定することです。 Flexboxでは下図のように、子要素をFlexアイテム、親要素をFlexコンテナという概念で考えます。 コードで確認すると、下記のようになります。 このように要素を横並
アニメーションCSSをもっと簡単に！@starting-styleとtransition-behaviorの実践テクニック - コハム
Using @starting-style and transition-behavior for enter and exit stage effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 @starting-styleを使って遊んでいたら、transition-behaviorと組み合わせることで、display: noneの切り替えや初回レンダリングのための純粋なCSSトランジション戦略を完成させるのに役立つかもしれないと思いました。 ダイアログとポップオーバーは、どちらもブラウザによってdisplayが切り替えられます。 中断可能なトランジション > キーフレームアニメーション これから説明する内容の完全なデモをCodepenで試してみてください： 結果は？ display: noneを使用した要素の表示/非表示の共
ブラウザの拡張機能である“Stylus”（Chrome 版 / Firefox 版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。 Stylus 自体の使い方の解説は、こちらをご参照ください。 〈目次〉 WorkFlowy カーソルのある行に背景色をつける 関連記事 WorkFlowy カーソルのある行に背景色をつける div.name--focused div.content{background:#f7f8f9} /*#f7f8f9にする場合*/ 適用例 （1行目にカーソルがある） 関連記事 同様の記事として、こちらもあります。 ich.hatenadiary.com
CSS シークレット
28チェックボックスのカスタマイズ35兄弟要素の個数にもとづくスタイル指定 推薦の言葉推薦の言葉 古き良き時代は去りました。前の千年紀には、CSSに対応したブラウザは2つしかありませんでした。しかもこれらのブラウザは、当時は機能がかなり限られていた仕様の中の、さらにかなり限られた部分にしか対応していませんでした。どんな機能を利用でき、どれが利用できないかをすべて覚えてしまうのも容易でした。それぞれの実装にはさまざまなバグや見落としがあり、お笑いも同然のひどいものもありましたが、このような誤りについても我々は把握していました。あまりにも根本的な一部のバグのせいで、各ブラウザでのレイアウトのふるまいにはまったく互換性がありませんでした。この問題を回避するために、HTMLパーサーのバグにつけ込んだハックを大量に用意するといったことまで行われました。 そう考えると、かつてはひどい時代だったのかもし
お手軽にアコーディオンを作ることができる details / summary タグ details タグと summary タグを使って以下のような HTML コードを書くと、お手軽にアコーディオン動作する FAQ を作ることができます。 <details> <summary>決められた曜日・時間に毎週通わなくてもよいのですか？</summary> <p>はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。</p> </details> <details> <summary>最初に4時間の予約が必要ですか？</summary> <p>原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。</p> </deta
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待 | blog.jxck.io
UIコンポーネントの大きさは外から制御しよう - Qiita
スタイルの適用範囲を限定する CSS の `@scope` ルール
Interop 2024 mid-year update | Blog | web.dev
JavaScript、HTML、CSSを使って画面切り替えをつくろう！ - Qiita
CSS メーソンリーの代替案 | Blog | Chrome for Developers
CSSのネストがネイティブになった今、Sassはまだ使うべきか？Sassを使うメリットとデメリット - コハム
ブラウザの拡張機能“Stylus”の使用例（3） - 小技チョコレート
details / summary で作る排他的に開閉するアコーディオン | 魚沼情報サービス