改行可能な ruby 要素と CSS ruby-align プロパティ | Blog | Chrome for Developers
HTML の <ruby> 要素は、特に東アジア言語のテキスト表示を改善するための強力なツールです。この要素を使用すると、ベーステキストの上または横に発音の注釈やその他の補足情報を表示できます。Chrome 128 以降では、Ruby アノテーションが改行可能になり、ruby-align CSS プロパティを使用して Ruby テキストのスタイルを設定できるようになります。 <ruby> 要素は 2 つの主要な部分からなります。ルビーベース（メインテキスト）とルビーテキスト（アノテーション テキスト）は、<rt> 要素でマークアップされています。Ruby テキストは、次の例に示すように、ルビーベースの上または下に表示できます。 <ruby style="ruby-position: under;"> 강남대로 <rt>江南大路</rt> </ruby> <ph type="x-smartl
CSS のフィールド サイズ設定 | Chrome for Developers
field-sizing を使用せずに適切なサイズの入力フィールドを作成するには、テキスト フィールドの入力の平均サイズを推測するか、JavaScript を使用して文字数をカウントし、ユーザーが入力したテキストに合わせて要素の高さまたは幅を増やす必要がありました。つまり、ユーザーが入力したコンテンツをたどろうとすると、簡単ではなく、エラーが発生しやすくなっていました。 field-sizing では、コンテンツに基づくサイズ設定を有効にするために 1 行の CSS が必要です。このコンテンツ ベースのサイズ設定スタイルは、テキスト領域以外でも有効です。 textarea, select, input { field-sizing: content; } クイックリンク 仕様 | 説明 ショート動画が好き？ Wes Bos と Jhey がそれぞれ field-sizing を紹介する素晴
View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers
View Transition API を使用すると、ウェブサイトのさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、マルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されている場合でも、サイト内を移動する際に視覚的な魅力のあるユーザー エクスペリエンスを実現できます。 ビュー遷移を使用する一般的な状況は次のとおりです。 商品リスティング ページのサムネイル画像。商品の詳細ページではフルサイズの商品画像に切り替わります。 ページからページを移動しても常に表示される、固定されたナビゲーション バー。 フィルタ処理に伴って位置が移動するアイテムを示すグリッド。 <ph type="x-smartling-placeholder"></ph> View Transition API で作成された遷移。デモサイ
Chrome でページを事前レンダリングしてページ ナビゲーションを即時に行う | Web Platform | Chrome for Developers
対応ブラウザ <ph type="x-smartling-placeholder"></ph> 109 回 <ph type="x-smartling-placeholder"></ph> 109 回 <ph type="x-smartling-placeholder"></ph> × <ph type="x-smartling-placeholder"></ph> × Chrome チームは、ユーザーが移動しそうな将来のページを完全に事前レンダリングする機能を再開しました。 事前レンダリングの歴史 これまで Chrome は <link rel="prerender" href="/next-page"> リソースヒントをサポートしていましたが、これは Chrome 以外では広くサポートされておらず、それほど表現力豊かな API ではありませんでした。 リンク rel=prerender
Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える | Blog | Chrome for Developers
11 月の Chrome 108 のリリースに伴い、画面キーボード（OSK）が表示されたときのレイアウト ビューポートの動作が変更されます。この変更により、Android 版 Chrome ではレイアウト ビューポートのサイズが変更されなくなり、ビジュアル ビューポートのみのサイズを変更できるようになります。これにより、Android 版 Chrome の動作が、iOS 版 Chrome および iOS 版 Safari と同等になります。 ここでは、現在の状況、Chrome でこの変更が行われる理由、実施可能な準備について説明します。 レイアウト ビューポートとビジュアル ビューポート ウェブサイトにアクセスしたときに、読み込んだページのコンテンツ全体が表示されない。その代わり、ブラウザにはページの一部を表示するビューポートが用意されています。このビューポートは、レイアウト ビューポート
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能（Chrome 119 以降） 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
アンロード イベントの非推奨 | Web Platform | Chrome for Developers
unload イベントは、ページ上で明示的にオプトインしない限り、ページでの unload ハンドラの呼び出しを停止するようデフォルトを段階的に変更することで、段階的にサポートが終了します。 サポート終了スケジュール Google がバックフォワード キャッシュの実装予定を発表した 2019 年 1 月には、アンロード動作が変更される可能性があるとお知らせしました。実装作業と並行して大規模なアウトリーチを実施した結果、アンロードの使用量が大幅に減少しました。このアウトリーチを補完するために、Chrome 115 からのアンロードのサポート終了の影響をテストする方法の提供も開始しました。 Permission-Policy API for unload による実際のテスト（Chrome 115、2023 年 7 月） フラグを有効にしてローカルテストを行う（Chrome 117）（2023
Animate elements on scroll with Scroll-driven animations | CSS and UI | Chrome for Developers
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. A reading indicator atop a document
Smooth transitions with the View Transition API | View Transitions | Chrome for Developers
The View Transition API gives you the power to create seamless visual transitions between different views on your website. This creates a more visually engaging user experience for users as they navigate your site, regardless of whether it's built as a multi-page application (MPA) or a single-page application (SPA). Typical situations where you would use view transitions include: A thumbnail image
New in Chrome 111 | Blog | Chrome for Developers
Here's what you need to know: Create polished transitions in your single page app with the View Transitions API. Bring colors to the next level with support for CSS Color Level 4. Discover new tools in the style panel to make the most of new color functionality. And there’s plenty more. I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 111. View Transitions API. Creating
Help pick a syntax for CSS nesting | Blog | Chrome for Developers
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; } An official CSS version of this syntax is being strongly considered and we have a split in preference that we'd like to employ the help of the community to break the tie. The rest of this post will be introducing the syntax options so you can feel informed to take a survey at the en
What's New In DevTools (Chrome 96) | Blog | Chrome for Developers
Preview feature: New CSS Overview panel Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS. You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
Improving user privacy and developer experience with User-Agent Client Hints | Privacy & Security | Chrome for Developers
Client Hints enable developers to actively request information about the user's device or conditions, rather than needing to parse it out of the User-Agent (UA) string. Providing this alternative route is the first step to eventually reducing User-Agent string granularity. Learn how to update your existing functionality that relies on parsing the User-Agent string to make use of User-Agent Client
Stick your landings! position - sticky lands in WebKit | Blog | Chrome for Developers
position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport. Use cases Paraphrasing from Edward O’Connor's original proposal of this feature: Introducing sticky positioning LAUNCH DEMO By simply addin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
