Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 背景 2022年ごろから、独立transformプロパティとしてtranslate rotate scaleが各ブラウザに実装されました。 これにより、transformの上書きや処理順などを気にせずに座標変換をすることができるようになり、手軽に使用しやすくなりました。 transform: rotate()とrotateは、一般に同じ動作をすると思われており、実際にほとんどのケースでそれは間違っていないのですが、そうではない場合もあります。 概要 transform:rotate()とrotateはだいたい同じ動作をするが、offse

謎挙動ではなく、Display P3など、sRGBよりも広い色域に対応した環境であれば `background-color: color(display-p3 1.5 1.5 1.5);`とかで理論上は『白より明るい白』は指定できると思います。

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

hn要素をナンバリングするテクニック 見出し1-1 見出し1-1-1 見出し1-1-2 見出し1-2 見出し1-2-1 いつの間にかこの採番がずれていた Bugzillaにレポート報告した Firefox 82 で取り込まれた修正の正体 闇の力で仕様変更された我々はどうすればいいのか hn要素をナンバリングするテクニック ここは h2 のセクションです。このブログではPC版のみですが、見出し文言の左上に ::before 疑似要素でCSSによる自動ナンバリングを行っています。 見出し1-1 ここは h3 のセクションです。 見出し1-1-1 ここは h4 のセクションです 見出し1-1-2 ここは h4 のセクションです 見出し1-2 ここは h3 のセクションです。 見出し1-2-1 ここは h4 のセクションです いつの間にかこの採番がずれていた body { counter-rese

はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので、こういう考えの人もいるのだなと捉えていただけますと幸いです。もっとこうしたら良くなるのに！というご意見は大募集しているので、どんどん教えてください。 マージンを使いたくない理由 マージンを使いたくない一番の理由に、スタイルが崩れるというものがあります。「崩れる」と一言で言っても、わかりずらいと思うので落ち着いて考えをまとめてみました。その結果、下記の2パターンに分かれるという結論に行きつきました。 マージンが不可解な挙動をする コンポーネントとして使い回しずらい この二つの観点から、マ

When aligning items to the start and end of a line in flexbox, there are a number of values to choose from. In this post I'm going to explain the difference between some values which appear to do very similar things: flex-start and flex-endstart and endself-start and self-endThe start, end, self-start and self-end values are available in Firefox, and in Chrome Canary. They are expected to ship in

3点リーダーとは 3点リーダー（省略記号）とは、テキストが長くてボックスの領域を超えてしまう場合に「...」でテキストを省略表示する手法です。 3点リーダーを実装するために必要な4つの設定 1、ボックスのwidthの指定 テキストが表示される領域の幅を指定します。 2、white-space: nowrap; テキストの改行を禁止し、1行で表示します。 3、overflow: hidden; テキストが表示される領域の幅を超えた場合、その超えた部分を隠します。 4、text-overflow: ellipsis; 非表示の溢れた部分を3点リーダー（...）で表示します。 See the Pen Untitled by kidorina (@kidorina) on CodePen. 簡単に長いテキストを省略することができます。 Table内での3点リーダーの挙動 Table内で3点リーダー

はじめに ChromeやEdgeのバージョンが128に更新された時、 縦スクロール固定、横スクロールは動的に動かしている要素の位置がずれた。 状況 cssのzoomプロパティが適用されたdiv要素の子要素に対して、 縦スクロールはposition:fixedで固定されるけど 横移動した時に位置を動的に動かすために jQueryのoffset().leftで絶対位置を取得してスクロールしたpxと引き算して動かすということをしていた。 jQueryのバージョンはv1.12.4とかなり古い... 原因 Chromeのバージョンが127から128に変わった時に、 cssのzoomが標準化されて、それに合わせてjavascriptのAPIが色々変更されたらしい。 リリースノート API影響 iframe コンテンツ ドキュメントに適用するズームを変更する 継承されたすべての長さのプロパティに適用され

本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。 トランジション開始時のスタイルを指定できる @starting-style @starting-style はトランジションされる要素に対して、CSS プロパティの開始値を定義するためのプロパティです。 従来の CSS 記法では display: none; が指定されている要素にトランジションを使用した場合、トランジションが発生しませんでした。 そこで、@starting-style ルールを用いてトランジション開始時のスタイルをしているすることで元の要素に display: none; が指定されていたとしても正しくトランジションを発火させることができるようになります。 .open-content { disp

DOM APIs affected by CSS zoom Authors: Chris Harrelson, Yotam Hacohen, Stefan Zager Demo Definitions: “Zoomed”: Geometry returned by API’s should be in window coordinates, i.e., multiplied by CSS zoom factor. Example:��

Chrome チームは、Chrome ブラウザ上にメーソンリー タイプのレイアウトを実装 あります。ただし、CSS グリッドの仕様の一部として実装すると、 記載されているとおりに 最近の WebKit の投稿 間違いですまた、WebKit の投稿はあるバージョンのバージョンに異議を唱えられたことも 誰も提案していなかった石工作業でした。 そのため、この投稿では、Chrome がセキュリティに関する懸念を抱えている理由を CSS グリッド レイアウト仕様の一部としてメーソンリーを実装し、 代替プロポーザルとまったく同じです要するに、 Chrome チームは石材のブロック解除に熱心に取り組んでいます。 必要ありません。 グリッド仕様に組積造を追加することは その他の理由も考えられます。 組積造の定義 グリッド仕様の範囲外であっても、複数のトラック サイズを アライメント、ギャップなどの特性の使

日本語記事の見出し ID が日本語になってしまっています！ を思い出してください。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#specifications こんな URL があったとき、en-US の部分を ja にするだけで目的の箇所にページ内リンクして欲しいですよね。しかし、現状の設計だとそれが不可能になってしまっているのです。ID が翻訳されてしまっているがために。 見出し語のローカライズ問題 ローカライズ版では、見出しはベタ書きで訳語を記述しています。前述の通り Specifications に対応する見出しとして 仕様書 と書いています。しかし、これが 仕様 になっていたりするページもあるのです。 そう、辞書ファイルを用意して翻訳するというアプローチを採っていないがために、