Chromeのバージョン116で display プロパティが @keyframes アニメーションで使える有効なプロパティとなりました。 （content-visibilityも使えるようになりました。） これまでdisplayは指定しても無視されており、アニメーションの終了後に要素をdisplay: noneにしたい場合などはJavaScriptからクラスの付け替えなどを行っていましたが、Chromeでは@keyframesだけで行えるようになりました。 そもそもなぜdisplayを使えなかったのか Web Animationsの仕様（Working Draft）を見てみると、 Animating properties という項目あります。 ここにはプロパティごとに「Animation Type」が設定されており、これに基づいてどうアニメーションするかが決まるとあります。このAnima
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 すべてのフロントエンド デベロッパーは、:has() が「親セレクタ」以上のものであること、subgrid の仕組みと理由、組み込みの CSS 構文でネストする方法、ブラウザで見出しテキストの折り返しのバランスを取る方法、コンテナクエリ ユニットの使用方法について知っておくべきだと思います。 この投稿は、すべてのフロントエンド デベロッパーが知っておくべき昨年 2023 年の 6 つの CSS スニペットの続きです。 CSS:has(.potential-beyond-being-a-parent-selector) :has() は 2023 年末に、すべての主要なブラウザでリリースされました。この新しいセレ
ブログ初心者が編集エディタを使わずに簡単にマーカーを引く方法をご紹介！ - ハピチわブログ
こんにちは。 面倒くさがりの主婦です。 日々、苦手な家事に奮闘しながら生活しています。 どうしても文章にマーカーを引きたくて、試行錯誤すること約数日。 やっとマーカーを引けるようになりました！⭐️ この記事では『編集エディタを使用せずにマーカーを引く方法』を今回参考にさせていただきましためいパパさんの記事と合わせてご紹介させていただいております。 初心者の私が同じく初心者の方のために「なるほど、こういうことか！」と理解できたことも含めてお伝えします。 参考記事 マーカーを引く方法 応用編（他のカラーのマーカーを引く方法） 参考記事 今回はこちらの雨のち晴れめいパパ (id:meipapa0219) さんの記事を参考にさせていただきました。 meipapa.hatenablog.jp こちらの記事では編集エディタの「Open Live Writer」を利用してマーカーを超絶簡単に引ける方法が
GitHub - webqit/oohtml: Towards a more dynamic and object-oriented HTML.
Explainer • Features • Modular HTML • HTML Imports • Data Binding • Data Plumbing • Implementation • Examples • License Object-Oriented HTML (OOHTML) is a set of features that extend standard HTML and the DOM to enable authoring modular, reusable and reactive markup - with a "buildless" and intuitive workflow as design goal! This project revisits the HTML problem space to solve for an object-orien
CSS Triggers | SukkaLab
Sukka Lab - Sukka (@SukkaW)'s experiments on Web, Front-End, React, and many more
Lightweight Javascript Framework Review (For Django Developers)
Lightweight Javascript Framework Review (For Django Developers) Introduction Many developers are confused when they try to find a Lightweight Javascript Framework for the Django project because there are so many options. In this post, I will talk and compare lightweight javascript frameworks, and help you decide which one is the best for your Django project. If you want to: Render HTML in Django,
Interop 2022、Interop 2023に続き、Interop 2024の取り組みがスタートした旨を知らせる記事が、参加組織それぞれから一斉に公開されました。 Interop 2024 | Blog | web.dev The web just gets better with Interop 2024 | WebKit Interop 2024 Launch - Bocoup Interop 2024 Launches | Igalia Microsoft Edge and Interop 2024 - Microsoft Edge Blog Announcing Interop 2024 - Mozilla Hacks - the Web developer blog 加えて、既にInterop 2024 Dashboardが公開されています。Interop 2023より引き
※本ページは、アフィリエイト広告を利用しています。 Tailwind CSSは好き嫌いが分かれるフレームワークだと思いますが、Tailwind CSSを採用しているWebサイトは確実に増えてきました。 Tailwind CSSのユーティリティファーストでどのようにマークアップするのか、ユーティリティクラスを用いたコンポーネント設計、基本的な使い方からテーマのカスタマイズやプラグインなど実践的なテクニックを詳しく解説した解説書を紹介します。 本書は、CSSのフレームワーク「Tailwind CSS」の解説書です。Tailwind CSSについては導入方法からていねいに解説されていますが、HTMLやCSSの基礎知識は解説されていません。すでにHTMLやCSSを使用して実際にWebサイトを構築している人向けです。 Tailwind CSSをこれから使用してみたい、すでに使用していてより良い使い方
Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき - 水底の血
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
Don't disable buttons
One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a second time while waiting for the form
本記事ではVivliostyle用のMarkdownとして開発されている、VFM（Vivliostyle Flavored Markdown）について解説します。 MarkdownとGFM、VFMの関係 構造化された文書を記述するためのマークアップ言語としてHTML/XMLがあります。これらは優れた表現力を持つ反面、記法として手動で書くには煩雑です。この課題を解決するための簡潔なマークアップ言語として、Markdownが登場しました。 以下はHTMLとMarkdownで同じ文書を記述した比較例です。 HTML <h1>Title</h1> <p>The quick brown fox jumps over the lazy dog.</p> Markdown # Title The quick brown fox jumps over the lazy dog. MarkdownはHTM
Thinking in StyleX | StyleX
Core PrinciplesTo understand why StyleX exists and the reasoning behind its decisions, it may be beneficial to familiarize oneself with the fundamental principles that guide it. This may help you decide if StyleX is the right solution for you. These principles should also be helpful when designing new APIs for StyleX. Co-locationThere are benefits of DRY code, but we don't think that's usually t
完全招待制のオンラインカンファレンス「PIXIV MEETUP 2023」。「創作活動を、もっと楽しくする。」というミッションを遂行するために、メンバーが普段行っている業務について、自らの言葉で語り、その想いと技術を共有する場です。 mimo氏は、ピクシブのデザインシステム「Charcoal」における、Web向けアイコンライブラリ「@charcoal-ui/icons」の実装について発表しました。全2回。前半は、「Charcoal」の概要と、「@charcoal-ui/icons」がWeb Componentsとして実装されている理由について。 登壇者の自己紹介とアジェンダ紹介 mimo氏：こんにちは。これから、「ピクシブのデザインシステム『Charcoal』アイコンライブラリをつくる」のセッションを始めていきます。 まず自己紹介からさせてください。自分は、mimoと申します。2022年に
【CSS】<input type="file">は::file-selector-buttonでスタイルをつけよう - Qiita
<input type="file">は直接スタイル指定ができず、デザインの変更 が面倒だったのですが、::file-selector-button を使えば簡単に指定できることを知ったので備忘録です。 使い方 See the Pen ::file-selector-button by himeka223 (@himeka223) on CodePen. ::file-selector-button にボタンのスタイルを設定するだけです！ 「選択されていません（選択後はファイル名）」の文言のスタイルはinputの方で変更できます。 display: block; を追加すればボタンとテキストの間で改行も可能です。 すべてのブラウザで対応済み 既にすべてのブラウザで対応済みのようで、安心して使えます！ テキストも変更したい場合は疑似要素をのせる 残念ながら ::file-selector-b
ブログカード、より洗練されたおしゃれさへ 手順を追っておしゃれブログカードを実現！ Font Awesomeのコード(headに要素を追加) デザインCSSに貼るコード HTMLで貼り付けするコード 気になっていたブログカード下のリンク 黄色マーカーで差をつける！目を引く投稿の秘訣 最後に ブログカード、より洗練されたおしゃれさへ 私が読者登録しているブログ、めいパパ (id:meipapa0219)さんの記事にありました「ブログカードカスタマイズ」を実践してみました。 手順を追っておしゃれブログカードを実現！ Font Awesomeのコード(headに要素を追加) これは、サイドバーのカスタマイズに使っているのでコードは入っていました。 デザインCSSに貼るコード コピペで３種類入れてみました。 HTMLで貼り付けするコード これは、定型文を作成しました。 <p class~の部分と幅
The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
To change a color based on whether Light Mode or Dark Mode used, you’d typically use a prefers-color-scheme Media Query. To make things easier, CSS now comes with a utility function named light-dark(). The function accepts two color values as its arguments. Based on which color scheme you are actively using, it will output the first or the second argument. ~ # Responding to Light or Dark Mode To c
Expert CSS: The CPU Hack
A "CPU Hack" implies unlocking the ability for continuous crunching of data and re-evaluation of state. For example, if cyclic vars didn't automatically fail to invalid (initial) state in CSS, this would continuously increment the value of --frame-count here: body { --input-frame: var(--frame-count, 0); --frame-count: calc(var(--input-frame) + 1); } Spoiler alert: You actually can do this in CSS,
Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the var
最新のHTML
業務でしばらく役に立たない 最新のHTML 2023 PWA Night vol.55 ～HTML/CSS〜
const divElement = document.getElementById("hoge"); console.log(divElement.style.display); // 空文字が出力される 解決方法 上記のコードで言うと divElement.style.xxxx で参照できるのは JavaScript で動的に設定したスタイルとなるため、CSS で適用したスタイルを参照する場合は window.getComputedStyle() を使用します。 これで、DOM 要素の実際に適用されているスタイル（計算されたスタイル）を参照することができます。 const divElement = document.getElementById("hoge"); const computedStyle = window.getComputedStyle(divElement); con
Getting started with CSS container queries | MDN Blog
As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layouts? Do we still need media queries? Let's find out. To understand how container queries are helpful, let's look at an example news feed layout and see where we could apply them. The news feed is a collection of articles, each with an image, a headli
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
この記事にたどり着いたということは、あなたはCSSの中央寄せについて知りたいということだと思います。 display: flex;やposition: absolute;など、CSSで中央寄せする方法は現在ではたくさんありますが、本当に知りたいのは中央寄せの『一番簡単』な方法ではないでしょうか？ この記事ではCSS最短2行で書くことができる中央寄せの方法を解説します。
October 11, 2023 You can't get faster than No Build For the first time since the 2000s, I'm working on a new Rails application without using any form of real build steps on the front-end. We're making it using vanilla ES6 with import maps for Hotwire, and vanilla CSS with nesting and variables for styling. All running on a delightfully new simple asset pipeline called Propshaft. It's all just so..
Baseline 2023 Stay organized with collections Save and categorize content based on your preferences. Baseline is coming to caniuse.com! In this post learn about the integration, and also discover some of the features that became part of Baseline in 2023. With the new definition of Baseline, there are two stages in a feature's lifecycle. Firstly, when it becomes newly available, and then when it be
CSS だけで動くスクロールドリブンアニメーション
CSS だけで動くスクロールドリブンアニメーション 2023.12.17 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。 スクロールドリブンアニメーションを利用することで、例えばスクロールの進行状況を表すバーであっ
はじめに こんにちは、D2Cのフロントエンドエンジニアをやっている廣瀬です。 私が担当しているプロジェクトでは、Vite・React・MUIを主に使用しています。 最近、フロントエンド系の技術を調査してみたところ、shadcn/uiというものを見つけました。 今回、このshadcn/uiをViteで試してみましたので、その内容を記事にしたいと思います。 今回の記事では簡単なWebページを作ってみたいと思います。 shadcn/uiとは？ Radix UIとTailwind CSSをベースに開発された、比較的低レイヤーなUIコンポーネントの集まりです。 ここで注意なのが、shadcn/uiはMUIやChakraUIのようなUIライブラリではなく、npmパッケージとしては提供されていません。ですので、依存関係としてインストールすることはできません。 環境の準備 実際に、以下のような手順でsha
１週間チャレンジ中！ヘッダ画像とページトップへのアイコンの設置&ステマ対策をしてみたよ。スマホ用ヘッダも⭐︎ 超初心者向けのやり方も解説！ - ハピチわブログ
こんにちは。 面倒くさがりの主婦です。 日々、苦手な家事に奮闘しながら生活しています。 昨日から１週間チャレンジとして「自分のブログ」に成長させるべく、少しずつ記事のリライトやブログデザインを整えています。 mendokusainoyada.hatenablog.com この記事では初心者の方用にヘッダ画像の設置方法とページトップへ戻るアイコンの設置について説明しています。 ステマ対策についてはそっくりそのまま真似をし、設置させていただいたサイトがありますのでそちらをご紹介させていただいております。 １、ヘッダ画像の設置 ２、ページトップへ戻るアイコンの設置 ３、ステマ対策 １、ヘッダ画像の設置 目的は パッと見ただけでアフェリエイトをしている記事だと分かるように忘れず記載しておきたかったから。（青矢印） 画像の作成には、 ブログ編集画面の右側、歯車マークの「編集オプション」を選択。 そこ
【CSS】CSSだけでスクロールに合わせたアニメーションがつくるscroll-driven animationsを触ってみた。 - Qiita
【CSS】CSSだけでスクロールに合わせたアニメーションがつくるscroll-driven animationsを触ってみた。HTMLCSSDesignanimationフロントエンド はじめに みなさんは、scroll-driven animationsを知ってますか？ scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたアニメーションが作れるようになるものです。 今までは、JavaScriptなどを駆使してスクロールアニメーションを作っていましたが、これから、CSSだけで、簡単に作れるようになるようです。 この記事では、そんなスクロールアニメーションでsampleを作ってみたので紹介します。 Sample シンプルな例 1 ページ全体のスクロール量に合わせて、<div>のスケールを変えている See the Pen CSS Anc
DisclaimerAll projects mentioned in this blog post have been contacted, and I confirmed that the behavior described in this article is either working as intended, already fixed, or will not be fixed. TL;DRThe browser loads elements in the HTML from top to bottom, and some JavaScript libraries retrieve data or attributes from the DOM after the page has been completely loaded. Because of how the con
フルスタックのWebフレームワーク「Remix v2」がリリース
Remix v1以降に行われたおもな変更としては、バージョン1.8とバージョン1.10において、RemixをReact Router v6に合わせて調整し、最終的に両者が同じ依存関係に基づくライブラリを使用できるようになったほか、バージョン1.11ではストリーミング／遅延応答を作成するためのショートカットであるdeferが追加されるとともに、ネストされたディレクトリを使用することなく、ネストされたレイアウトの実行を簡素化する「フラット」ルーティングが追加されている。 バージョン1.13とバージョン1.16では、PostCSS、CSSモジュール、Vanilla Extract、CSSサイドエフェクト（グローバル）インポートといった、CSS戦略のサポートが大幅に改善された。また、バージョン1.14とバージョン1.18では、ホットモジュールリロード（HMR）とホットデータリロード（HDR）の両方
fetchPriority APIは、リソースの相対的な優先度をブラウザに示すために使用します。fetchpriority属性を<img>、<link>、<script>、<iframe>の各要素に追加するか、Fetch API上でpriority属性を使用することで優先度を設定できます。 ブラウザのロードプロセスは複雑です。ブラウザは、主にリクエストの種類や、ドキュメントのマークアップ内におけるリクエストの位置によってその優先度を判断します。例えば、ドキュメントの<head>内で要求されたCSSファイルの優先度はHighestとなり、defer属性が設定された<script>要素の優先度はLowとなります。ブラウザは、同じ優先度が割り当てられたリソースを、検出した順にダウンロードします。 fetchpriority fetchpriority属性を使用することで、要求されたリソースの優先
State of CSS 2023
CSS is going through a period of unprecedented progress. Between :has(), container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had Chen Hui Jing to help design the survey and guide us through the CSS jungle. And speaking of the survey, did
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
スクロールに合わせてアニメーションが進められるScroll-driven Animationsについて
3 行まとめ Chrome115 のリリースで、Scroll-driven Animations が実装された Scroll-driven Animations ではスクロールに合わせてアニメーションを進行できる シンプルな記述でアニメーションとスクロールを関連づけられる Scroll-driven Animations とは Scroll-driven Animations は Chrome115 で実装された、スクロール量に合わせてアニメーションが進められる API です。この新しい API では scroll イベントを使わずに CSS と JavaScript でアニメーションとスクロールを関連づけることができるようになりました。 上記の記事で紹介されていますが、scroll イベントを使ったアニメーションの実装と比べて、メインスレッドで重い処理を実行していたとしても、スクロールに
The Complex But Awesome CSS border-image Property — Smashing Magazine
The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. Or maybe you have reached for it but found all of its slicing logic difficult and cumbersome. That’s because it is! But the property is also capable of some really interesting things if we take the time to understand its syntax. In this article, Temani Afif demonstrates different
lamplightdev - Streaming HTML out of order without JavaScript
This is a simple page that renders a list of 10 items. Try it with and without JavaScript enabled in your browser. There's a few things to notice: The 'app shell' renders first - you see the header and the footer, but there's a loading placeholder where the list of items will be rendered. After a second the loading placeholder is replaced with the list of items - but with each item itself having a
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
ButtonとLink、どう実装する？
ButtonとLink、どう実装する？ 2023/08/30 Encraft #6 @yoshiko_pg 1
「Google Chrome 119」安定版リリース、iOS版でアドレスバーを画面下部に移動できるようになるもAndroid版は変更なし
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン119.0.6045.106がリリースされました。iOS版にてアドレスバーを下部に移動させる設定が可能になったほか、既存のCookieに400日の有効期限の上限が適用されたり、色の相対的な指定を可能にするCSSのアップデートが行われたりしています。 New in Chrome 119 - Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-119/ How to choose a position for your address bar in Chrome on iOS https://blog.google/products/chrome/customize-chrome-ios-address-bar/ New in Chro
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
keyframesアニメーションでdisplayプロパティが使えるようになる（なった）
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年） | Articles | web.dev
Interop 2024がスタート | フロントエンドBlog | ミツエーリンクス
Tailwind CSSの基本的な使い方から実践的なテクニックまでしっかりと学べる一冊 -Tailwind CSS実践入門
Vivliostyleに特化したMarkdown - VFMの使い方 | gihyo.jp
デザインシステムにおけるアイコンライブラリ実装の紆余曲折 ピクシブがWeb Componentsを選択した理由
おしゃれ見えするブログカード！ - baby blue
Inline conditionals in CSS? • Lea Verou
div タグのスタイルを参照しようとしたら参照できなかった話 - Qiita
HTMLの現状を明らかにする調査「State of HTML」が実施中
【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！
You can't get faster than No Build
Baseline 2023 | Blog | web.dev
shadcn/uiを使って簡単なWebページを作ってみた
DOM-based race condition: racing in the browser for fun
fetchPriorityと、LCPの最適化 | POSTD
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG