State of CSS 2022 | Blog | web.dev
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
Chrome and Firefox soon to reach major version 100 | Articles | web.dev
Chrome and Firefox soon to reach major version 100 Stay organized with collections Save and categorize content based on your preferences. User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help. Chrome and Firefox will reach version 100 in a couple of months. This has the potential to cause breakage on sites that rely on identifying
Prevent unnecessary network requests with the HTTP Cache | Articles | web.dev
Prevent unnecessary network requests with the HTTP Cache Stay organized with collections Save and categorize content based on your preferences. Fetching resources over the network is both slow and expensive: Large responses require many round trips between the browser and the server. Your page won't load until all its critical resources have downloaded completely. If a user on your site has a limi
CSS accent-color | Articles | web.dev
CSS accent-color Stay organized with collections Save and categorize content based on your preferences. Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custom styles, or resetting input styles and build it up from scratch. Building it up from scratch ends up being much more work than anticipated. It can also lead to forgotten styles for element
2021 Scroll Survey Report | Blog | web.dev
2021 Scroll Survey Report Stay organized with collections Save and categorize content based on your preferences. Get the 2021 Scroll Survey Report plus words from the Chrome team about how this impacts priorities and plans for Chromium and the web. In April, the Chrome team released a scroll and touch-action survey based on top reported issues from the 2019 MDN Web DNA Report. The 2021 Scroll Surv
The performance effects of too much lazy loading | Articles | web.dev
The performance effects of too much lazy loading Stay organized with collections Save and categorize content based on your preferences. Lazy loading is a technique that defers downloading a resource until it's needed, to conserve data and reduce network contention for critical assets. It became a web standard in 2019 and today loading="lazy" for images is supported by most major browsers. This pag
Compat 2021 mid-year update: Flex gap everywhere | Blog | web.dev
Compat 2021 mid-year update: Flex gap everywhere Stay organized with collections Save and categorize content based on your preferences. Mid-year update on Compat 2021—an effort to eliminate browser compatibility problems in five key focus areas: CSS flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms. It's time for the mid-year update on Compat 2021—an effort to eliminate browser
CSS size-adjust for @font-face | Articles | web.dev
CSS size-adjust for @font-face Stay organized with collections Save and categorize content based on your preferences. As a web font loads, you can now adjust its scale, to normalize the document font sizes and prevent layout shift when switching between fonts Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-fami
Best practices for fonts | Articles | web.dev
Best practices for fonts Stay organized with collections Save and categorize content based on your preferences. This article discusses performance best practices for fonts. There are a variety of ways in which web fonts impact performance: Delayed text rendering: If a web font has not loaded, browsers typically delay text rendering. In many situations, this delays First Contentful Paint (FCP). In
The new responsive: Web design in a component-driven world | Articles | web.dev
The new responsive: Web design in a component-driven world Stay organized with collections Save and categorize content based on your preferences. Responsive Design Today Today, when using the term: "responsive design", you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size. But soon, this perception o
Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag | Articles | web.dev
Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag Stay organized with collections Save and categorize content based on your preferences. The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet. Background The prefers-color-scheme user preference
Use HTTPS for local development | Articles | web.dev
Use HTTPS for local development Stay organized with collections Save and categorize content based on your preferences. Most of the time, http://localhost behaves like HTTPS for development purposes. However, there are some special cases, such as custom hostnames or using secure cookies across browsers, where you need to explicitly set up your development site to behave like HTTPS to accurately rep
Best practices for carousels | Articles | web.dev
<div class="slides"> <img src="https://example.com/cat1.jpg"> <img src="https://example.com/cat2.jpg"> <img src="https://example.com/cat3.jpg"> </div> For advanced carousel optimization, consider loading the first slide statically, then progressively enhancing it to include navigation controls and additional content. This technique is most applicable to environments where you have a user's prolong
New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly | Articles | web.dev
Aspect ratio Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio. Two images with the same aspect ratio. One is 634 x 951px while the other is 200 x 300px. Both have a 2:3 aspect ratio. With the ad
Reduce web font size | Articles | web.dev
Reduce web font size Stay organized with collections Save and categorize content based on your preferences. Typography is fundamental to good design, branding, readability, and accessibility. Web fonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering regardless of the screen size and resolution. Web
Cumulative Layout Shift (CLS) | Articles | web.dev
Cumulative Layout Shift (CLS) Stay organized with collections Save and categorize content based on your preferences. Unexpected layout shifts can disrupt the user experience in many ways, from causing them to lose their place while reading if the text moves suddenly, to making them click the wrong link or button. In some cases, this can do serious damage. A sudden shift in layout makes the user co
Optimize Cumulative Layout Shift | Articles | web.dev
Optimize Cumulative Layout Shift Stay organized with collections Save and categorize content based on your preferences. Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics. It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved. Layout shifts can be distracting to users. Imagine yo
It's time to lazy-load offscreen iframes! | Articles | web.dev
It's time to lazy-load offscreen iframes! Stay organized with collections Save and categorize content based on your preferences. Lazy-loading of <iframe> elements defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage. As with lazy-loading for images, use the loading attribute to tell
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animations | web.dev
Profile Page
