朗報！ これでCSSネストの記述方法がより簡単になります
2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定のChrome 120で、CSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になるので紹介します。 CSS nesting relaxed syntax update by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 要素タグのネスト このネストを可能にするために何が変更されたのか はじめに CSSのネストは、2023年3月にリリースされたChrome 112でサポートされ、現在では主要な各ブラウザでサポートされています。
「Google Chrome 118」安定版リリース、CSSのスタイルルールの適用範囲を限定できる「@scope」をサポート
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン118.0.5993.71がリリースされました。CSSにおいて特定範囲のみにルールを適用できる「@scope」がサポートされたほか、「scripting」と「prefers-reduced-transparency」という2つのメディア特性の追加や開発者ツールの機能向上などのアップデートが行われています。 New in Chrome 118 - Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-118/ New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more! - YouTube ◆CSSで
CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
CSS Click Shooting Game - No JavaScript -
JavaScriptを使わず、CSSとHTMLで作ったクリックシューティングゲームです。 Chrome / Safariの最新版で動きます。IE / Firefoxでは動きません。 ● 操作方法 - 移動する牛をクリックすると捕まえることができ、スコアが増えます。全部で101匹います。 - F5で再スタートできます。 ● 技術的詳細とソースコード - http://d.hatena.ne.jp/ndruger/20110428/1304021590 ● コピーライト このソフトの画像は、REFMAPが配布しているフリー画像素材を加工して使用しています。このソフト内で使用されている画像を、このゲームを遊ぶ以外の用途には使用しないで下さい
javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？
CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。 ソースコード https://github.com/ndruger/css-game 技術的な説明 アニメーションはCSS Animationを使うだけなので簡単ですが、問題は状態管理です。 アクションゲームを作るには、基本的に下記の要素が必要です。 1. ユーザー入力に対する状態の変更 2. 状態の保持 3. 状態に応じて見た目
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe、オープンソースのコードエディター「Brackets」Sprint 32を無償公開