[B! css][Chrome] igrepのブックマーク

:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!

What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。検証の状態とは、例えば<input type="em ail" required />な要素では入力されていない場合やem ailとして許容されない文字列が入力がされている場合はinvalidな状態になり、em ailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと

igrep 2023/11/08

":validと:invalidが入力要素の初期状態に対して検証を行うのに対して、:user-validと:user-invalidは入力に対してユーザーの操作が行われたあとに検証を行います。"

chrome
css

リンク

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。まずは、さっそく機能拡張のインストールから。下記のページにChromeでアクセスし、﹁Chromeに追加﹂をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストアこの機能

igrep 2023/09/27

css
chrome

リンク

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

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

igrep 2022/11/18

ついに来たか

css
chrome

リンク

Houdini - CSS に関する誤解の解消 | CSS and UI | Chrome for Developers

CSS の作業量について考えたことはありますか？1つの属性を変更すると、突然ウェブサイト全体が別のレイアウトで表示されます。これは魔法のようなものです。私たちウェブ開発者のコミュニティはこれまで、その魔法を目の当たりにし、観察できただけです。独自の魔法を考案したい場合はどうすればよいでしょうかマジシャンになりたいとしたら？ Houdini に登場！ Houdini のタスクフォースは Mozilla、Apple、Opera、Microsoft、HP、Intel、Google のエンジニアが連携し、CSS エンジンの特定部分をウェブデベロッパーに公開しています。このタスクフォースは、W3C に承認されて実際のウェブ標準になることを目指して、ドラフトのコレクションに取り組んでいます。チームはいくつかの上位レベルの目標を設定し、それを仕様のドラフトに変換し、それからサポートの下位レベルの

igrep 2017/12/18

css
Chrome

リンク

Chrome Dev Summit 2014: Let's build some apps with Polymer!

Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.

igrep 2017/04/18

Chrome 59からのDevTools。JSやCSSのカバレッジをとったりリクエストをブロックできたりするらしい。

リンク

するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary

サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。今回はするするさせられないか、がんばってみる。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウザでもするするさせるアニメーションを止めるまず、いまのjQueryベースなアニメーションを止める。コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って

igrep 2016/05/17

素晴らしい。

リンク

するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary

サイボウズの採用情報ページを見ていた。サイボウズ | 採用情報︵新卒・キャリア︶といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウザでもするするさせるアニメーションの実装を調べるあとのことを考えて、Chrome DevToolsを使う。まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div

igrep 2016/05/17

こういう凝った速度改善してみたいものだ

リンク

Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features

$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81

igrep 2016/02/04

CSS custom properties, background sync!

Chrome
CSS

リンク

X-Content-Type-Options: nosniff の効果

Heads up: nosniff header support coming to Chrome and Firefox https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox ChromeとFirefoxでnosniffってどういうことなんだろうと思って少し調べた。 IE8から、X-Content-Type-Options: nosniff があった場合は、ファイルの中身を自動判別する機能が無効になる。htmlじゃないものが自動判別でhtmlだと誤判別されて表示されることで起こるXSSを防ぐことができる。 Internet Explorer 8 のセキュリティ Part VI: Beta 2 の更新項目 http://msdn.microsoft.com/ja-j

igrep 2013/05/20

リンク

はてなブックマーク

タグ

関連タグで絞り込む (10)

cssとChromeに関するigrepのブックマーク (9)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス