CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされますCSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io
Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
difference between width auto and width 100 percent
Previously my assumption about width: auto was that the width is set to that of the contents. Now I see that it takes the full width of the parent. Can anyone please describe the differences between these?
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
Atomic CSS-in-JS
With utility/atomic CSS, we acknowledge it’s ok to couple the structure and presentation layers: when we need to change the button color, we modify the HTML, not the CSS. This tight coupling is also acknowledged in modern CSS-in-JS React codebases, but it seems the CSS world figured out first that the “separation of concern” of the web didn’t feel right. Specificity is also less a problem, as we u
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。
CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ
2021年12月14日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。 ↑私が10年以上利用している会計ソフト！ デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね！ Water.css GitHub｜デモ クラスなしCSSフレームワークとして最初に目立っていたのがこのWater.css。ダー
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
Value definition syntax - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
Assigning property values, Cascading, and Inheritance
Note: Several sections of this specification have been updated by other specifications. Please, see "Cascading Style Sheets (CSS) — The Official Definition" in the latest CSS Snapshot for a list of specifications and the sections they replace. The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2). 6.1 Specified, computed, and actual values Once a user agent has parsed a documen
What is the difference between fixed, fluid, adaptive and responsive layouts and why should I care?
Blocks of text and screenshots do not cut it when explaining the difference, so here, have some animations A week ago I was asked if we wanted a page N to be implemented as fixed, fluid or responsive. To my embarrassment, I did not have a specific idea what exactly that meant. So I went looking. There is a ton a lot of textual explanations, half of them are development-oriented. Static images adde
I am mitsuruog | CSSができる人とできない人では何が違うのか？(レイアウト編)
プライベートで CSS を教える機会があるのですが、CSS に関しては特に苦手にしている人が多く、「どうやったらそうなれますか？」という質問をよくもらいます。 そこで普段あまり考えたことがなかったので、ちょっと考えてみました。 その中で感じたことは、自分には見えているものが、他の人には見えていないということでした。 いくつかキーとなる視点がありそうなので、シリーズ化してみます。 今回は「レイアウト」について。 はじめに 今回は次のような、コメントフィード風の UI を作るケースを想定して順に説明していきます。 ちなみに自分の場合、作成時間は 15 分くらいでした。 コードはこちらで全て見ることができます。 https://codepen.io/mitsuruog/pen/dmZBLM?editors=1100 CSS が苦手な人にやらせた場合、自分が期待した通りにはならないケースが多いと思
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
Pingendo というBootstrap 4 ベースのプロトタイピングツールが良い - Qiita
動作環境 Windows(筆者環境), MacOS, Linux 社内でアプリ開発がありプロトタイプ作成のため色々ツールを探していたのですが、同僚が教えてくれたBootstrap 4 ベースのPingendoが良かったので紹介します。Pingendoのオススメポイントは主に以下の3つです！ ドラッグ & ドロップでUIパーツを配置 Bootstrap 4 ベースの豊富なUIパーツ アプリ内での高いカスタマイズ性 以下詳細を見ていきましょう。 ドラッグ&ドロップでUIパーツを配置 Pingendoの画面構成は以下のとおり。 画面左にUIパーツ、中央にプレビュー、画面下にコード（デフォルトでは最小化）、画面右はテーマという配置です。レイアウトは洗練されているので使う時は迷うことないかと思います。 私が感動したのは左のメニューからコンポーネントを配置する際の手軽さです。動画で見ればすぐ解るかと思
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 公開日: 2017年4月26日 タグ: css, ie, accessibility 事情があって游書体関連の話題をいろいろ読み漁っていたところ、「游ゴシックにすると IE では数ピクセル上にずれてしまうので、CSS ハックを使って別のフォントを適用する」という手法を紹介しているのがあった1。どういうハックかと思って見てみたら次のようなもので、ちょっとこれどうなのよ? とか思ったのであった。 @media (-ms-high-contrast: none) { /* IE10/11 に適用する*つもりの*フォント指定 */ } 試しに “ms high contrast” で検索してみると同じコードがけっこう出てくるので、もしかしてある程度広く認知されてる手法なのだろうか…あまり信じたくはないのだけ
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全ブラウザ対応したcontainer queryは何がスゴイのか？
max-content - CSS: Cascading Style Sheets | MDN