Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) CSSのclip-pathで「geometry-box」値 CSSのclip-pathで「xywh()」と「rect()」値 Chrome 119で追加された4つの新しいCSSの機能 11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。 以下、その4つの新
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
Coverageで使ってないコードを検出（ひとり DevTools Advent Calendar 2020 – 18日目） | Ginpen.com
18 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 たくさんコードを書いて書き足して消して書き直して消して書き換えてって繰り返してると「あれこれまだどこかで使ってるっけ？」みたいになることがあります。近年は VS Code が灰色で表示してくれたり ESLint で検出 できたりもできるけど、でも別ファイルからも使えるようなやつだとそういうのも厳しい感じです。 あと CSS の使われていないスタイルも。 DevTools にはそういうものを検出する機能があります。 先にまとめ Coverage パネルを使って未使用箇所や割合を計測 まともにやるならツールを 未使用コードを検出 DevTools の右上 “…” → More tools → Coverage 指示に従い reload ボタンを押す 画面は再読み込みされる 必要に応じて
新Edgeでクリック時にmousemoveイベントが発火される問題 | バシャログ。
こんにちわ。山崎です。最近更新できておらず、久々の投稿になります。 今回はとあるプロジェクトの開発中に2020年1月15日にリリースされた新Egdeでの不具合を見つけたのでそれについて書いていこうと思います。 何を作っていたのか イベントサイトの会場マップでそのマップをドラッグしたらマップの位置を移動し、 クリックしたら該当の小間番号のモーダルが開き詳細が見られるというものです。 実際のソースコードを載せることはできないので、今回複数の企業が合同セミナーイベントを行うという程でかなり簡易的なものですがdemoを作ってみました。 デモはこちら 画面収録 2020-06-29 16.35.25.mov ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>EdgeとChromeでclick時にmousemoveが発火
Sight - Google Chromeでソースコードをシンタックスハイライト化 MOONGIFT
開発者であれば、開発中はコードをシンタックスハイライトして表示しているはずです。ハイライト表示されていない状態では内容の把握すら辛いはずです。多くの開発者向けサービスであればシンタックスハイライトに対応していますが、ただのコードが書かれたファイルにアクセスした場合には素の状態で表示されてしまいます。 そこで使ってみたいのがSightです。 Sightの使い方 インストール前。 インストール後。 Sightをインストールして任意のサイトで各種プログラミングファイルを閲覧すると自動的にシンタックスハイライトして表示してくれます。拡張子を見ているので、それに合わせて表示してくれるでしょう。開発者にとって便利な機能拡張になりそうです。 SightはGoogle Chrome用、JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Sight - Chrome ウェブ
「Google Chrome 77」安定版リリース、パフォーマンス計測機能の向上やJavaScriptからフォームデータを自由に編集できる機能などが追加
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン77.0.3865.75がリリースされました。ウェブサイトのパフォーマンス計測機能が強化されたほか、送信するフォームデータをJavaScriptから自由に編集できる機能が追加されています。 New in Chrome 77: Native Lazy Loading, Largest Contentful Paint, and New Forms Capabilities - YouTube ◆パフォーマンス計測機能が強化される 以前より、コンテンツの描画が始まった段階を示す「First Paint」「First Contentful Paint」や、意味のある画面が表示された時点を示す「First Meaningful Paint(FMP)」、そしてユーザーが操作可能になる時点を示す「Time to Interacti
Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート
Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。 Native image lazy-loading for the web! by Addy Osmani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chrome 75でリリース予定のloading属性 ブラウザがネイティブで遅延ロードをサポート loading属性とは loading属性の
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。 １．問題点 テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。 <style> table { border-collapse: collapse; width: 600px; } thead { position: sticky; top: 0px; background: grey; } th, td { border: solid 1px #00 0000; } </style> <body> <p>1</p> <table> <thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> </tr> </thead> <tbody> <tr> <t
CodeCopy - GistやGitHubにあるコードを簡単にコピーできる機能拡張/亜ドン MOONGIFT
GitHubやGistなどプログラミングコードが記載されているサイトにおいて、そのコードをコピーしたいと思うことは多々あります。マウスで選択しても良いのですが、最初や最後の文字がうまく選択できなかったりするとストレスを感じるでしょう。 そこで使ってみたいのがCodeCopyです。コードのコピーが簡単にできるようになるGoogle Chrome機能拡張/Firefoxアドオンです。 CodeCopyの使い方 機能拡張をインストールすると、コードの書かれた部分の右側にコピーボタンが表示されます。 後はアイコンをクリックすればコードがコピーされます。とても簡単なのでコピーが捗るようになるでしょう。マウスで選択してコピーという二手間を一度のクリックで解決してくれる便利なソフトウェアです。 CodeCopyはGoogle Chrome機能拡張/Firefoxアドオンのオープンソース・ソフトウェア（M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
StackoverflowやGithub等のコードスニペットをコピーしやすくするChromeエクステンション・「CodeCopy」