[B! css][chrome] usako1124のブックマーク

SPA view transitions land in Chrome 111 | Blog | Chrome for Developers

The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states. Transitions created with the View Transition API. Try the demo site–Requires Chrome 111+. These kinds of transitions were a frequently-requested feature from developers, including me, and I think we've managed to land it in a way that balances good defaults with extensi

usako1124 2023/03/10

リンク

Chrome 108 ベータ版 : CSS の新しいビューポートの単位、Federated Credential Management API、可変 COLRv1 フォントなど

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

usako1124 2022/12/01

リンク

Chrome 108にはCSSの新しい機能がたくさん含まれている、新機能と変更・削除された機能のまとめ

11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。 Chrome 108の新機能、変更・削除された機能を紹介します。 chrome-108-beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Chrome 108のCSSの新機能変更・削除された機能 Chrome 108のCSSの新機能 Chrome 108でデフォルトで有効になったCSSの新機能は、下記の通りです。新しいビューポート単位（lvh, svh, dvhなど) 新しいプロパティ（break-after, break-before, break-insid

usako1124 2022/12/01

リンク

デベロッパツールの新機能が便利！そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。インライン要素にwidthを設定デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca

usako1124 2022/11/02

リンク

placeholderに付いてるスタイルを見てみたい！【Shadow DOM】 - Qiita

スタイルを確認してみるこのスタイルをGoogle Chromeのデベロッパーツールで確認しようとすると… >>>ない<<< そう…ないのです。付いているはずのスタイルが見当たらない。これは placeholder が「Shadow DOM」というもので構成されているからです。 Shadow DOM を見えるようにする Chromeのデベロッパーツールで Shadow DOM を見えるように設定してみましょう。 1. 右上の「⋮」から「Settings」をクリック 2. 「Preference」→「Elements」で「Show user agent shadow DOM」にチェック！ Shadow DOM を見てみるもう一度コードを見てみましょう。なんか見たことないDOMがあるーーー！！内側のdivにスタイル付いてるーー！！！こんな感じで見ることができます。 placehold

usako1124 2022/07/13

リンク

【2022年】Chromeで画像がぼやける場合のCSS対処法

参考：ドット絵やQRコードをボケさせたくないときに使えるCSS – Qiitaブラウザ依存が強く、2021年現在ではベンダープレフィックスで対応する必要があります。今回使用した「image-rendering: -webkit-optimize-contrast;」は「image-rendering: crisp-edges;」のChrome用ベンダープレフィックスになります。効果の確認方法当ページでChromeデベロッパーツールを開いて以下の画像を選択し、以下の画像のように「image-rendering: -webkit-optimize-contrast;」をオンオフ切り替えてみてください。劇的な変化はしませんが、よく見ると画像が少しハッキリと表示されるのが見れるかと思います。その他の対処法以前にも複数の解決法が提案されていましたが、どれも何かしらの問題がありました。 bac

usako1124 2022/01/13

css
chrome

リンク

DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com

Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。はじまりコードスニペット版。これはこれで手軽でよろしいね。ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追

usako1124 2018/06/26

リンク

[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張

CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。例えば、レイアウトをFlexboxで実装する場合、Fle

usako1124 2018/05/25

リンク

Chromeで不要なCSS/JavaScriptを洗い出す

こんにちは！開発部の武内です。 Webフロントエンドの開発はここ数年で急激に高度化していますが、それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。 Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。 Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。グラフィカルなデザイン調整コードのステップ実行通信のロギング etc… 今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。 CSS and JS code coverage What’s New In DevTools (Chrome 59) Find unused CSS and JS code with the new Coverage tab. When you load

usako1124 2018/05/08

リンク

https://developers.google.com/web/tools/setup/workspace/setup-devtools

Chrome でビルドする Chrome の仕組み、オリジントライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。

usako1124 2017/12/21

リンク

Webkit-based blurry/distorted text post-animation via translate3d

usako1124 2016/05/25

リンク

[Solved] Transforms Cause Font-smoothing Weirdness In Webkit - CSS-Tricks

usako1124 2016/05/25

リンク

How to remove focus border (outline) around text/input boxes? (Chrome)

Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams Collectives™ on Stack Overflow Find centralized, trusted content and collaborate around the techno logies you use most. Learn more about Collectives

usako1124 2015/08/25

リンク

【Chrome】指定サイズよりフォントが大きくなる - Qiita

現象 PCのChromeとAndroidのChromeでとあるところのフォントが大きくなる（CSSなどで指定はしていない） ※私の場合、幅を広く指定したら起きた原因？ viewportが指定されていない以下のようにviewportに数字で幅が指定してある（initial-scaleが指定されていない）

usako1124 2015/08/24

css
chrome

リンク

スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig

表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。