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

[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita

2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。まずはView Transitions APIの特徴から紹介したいと思います。特徴1：異なるDOM要素間でアニメーションできるアニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。特徴2：アニメーションがCSSで自由自在アニメー

o_hiroyuki 2024/06/12

リンク

CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法

まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。はじめに Webのアニメーション、ちょっとだけおさらいアニ

o_hiroyuki 2023/07/13

css
chrome

リンク

Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応

（2023/08/29）全ブラウザでネストに対応したので記事を更新しました。本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

o_hiroyuki 2022/11/19

css
chrome

リンク

Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】

o_hiroyuki 2022/09/12

リンク

印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能

いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I）スマホ（device mode）アイコンをクリック drawerアイコンをクリックする（Emu

o_hiroyuki 2015/05/25

Chrome
css

リンク

SelectorGadget: point and click CSS selectors

SelectorGadget is an open source tool that makes CSS selector generation and discovery on complicated sites a breeze. Just install the Chrome Extension or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then g

o_hiroyuki 2015/01/24

chrome
css

リンク

New animation controls in Chrome Canary | Val Head

Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations. T

o_hiroyuki 2015/01/09

CanaryではCSSアニメーションの速度をコントロールできると

css
Chrome

リンク

CSS Dig

Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Properties Take a look at all your CSS properties, their frequency and variations. Have too many shades of blue? Inconsistencies often means confusion for your developers and irregularities for your end users. Selectors & Specificity Are your selectors long? Using lots of IDs? S

o_hiroyuki 2014/11/17

cssを解析

css
Chrome

リンク

CSS Shapes Editor for Chrome

CSS Shapes Editor for Chrome 31 Aug 2014 - London CSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial. None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn't help too much even if they did. CSS Shapes are meant to be used in the browser con