Snippets

Rachel Andrew on Edge moving to Chromium

I woke up, to the [rumours] that were later confirmed that Microsoft were dropping their rendering engine EdgeHTML in favour of using Chromium. And I feared that we were heading right back to the days where one browser had over 95% market share. Where one browser could quite literally dictate the direction of the web.

Many of the things I have talked about […] were implemented by the Microsoft team. No, not in a perfect finished way, but enough for us to be able to experiment. Enough for us to try them out. Grid Layout was first implemented by the Microsoft Team in IE10. No, it [wasn’t] perfect, essentially a prototype for what was to come, but it enabled people to experiment.

[…]

Fewer browsers mean fewer experiments. Mean fewer places where things can start to evolve.

[…]

And I am not having a dig at Google here, again, there are some great people doing great things there, and the company is being a company doing what companies do - growing, succeeding. This isn’t a fight between good and evil. It’s a fight against a monoculture turning the web platform into the product of a single company. Whoever that company might be this time.

Source link
https://rachelandrew.co.uk/archives/2020/04/07/making-things-better/
Tags
Browser diversity
Browsers - Microsoft Edge
Browsers - Chrome
Google
Web standards

Avoid Large, Complex Layouts and Layout Thrashing

Layout is where the browser figures out the geometric information for elements: their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome, Opera, Safari, and Internet Explorer. In Firefox it’s called Reflow, but effectively the process is the same.

Similarly to style calculations, the immediate concerns for layout cost are:

  1. The number of elements that require layout.
  2. The complexity of those layouts.

TL;DR

  • Layout is normally scoped to the whole document.
  • The number of DOM elements will affect performance; you should avoid triggering layout wherever possible.
  • Assess layout model performance; new Flexbox is typically faster than older Flexbox or float-based layout models.
  • Avoid forced synchronous layouts and layout thrashing; read style values then make style changes.

See the source link for details and solutions.

Source link
https://developers.google.com/web/fundamentals/performance/rendering/avoid-larg…
Tags
Performance - Repaint and reflow
Performance
CSS - Flexbox
CSS - Layout
JavaScript

Dark mode images: reducing brightness and contrast

A good rule is to decrease the brightness and contrast of images a bit so that it looks comfortable to the eyes when it’s against a dark background. A super bright image on a super dark background can be jarring and dimming the image reduces some of that heavy contrast.

[…]

The CSS filter() function is more than capable of handling this for us:

CSS

/* Apply the filter directly on the body tag */
body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}


/* Or apply it via media query */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}
Source link
A Complete Guide to Dark Mode on the Web | CSS-Tricks
Tags
Dark mode
CSS - Media Queries
CSS - Filters
Images

The color-scheme meta tag

HTML

<meta name="color-scheme" content="dark light">

The browser will use this information in tandem with the user’s browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color modes.

— Standard metadata names - HTML: HyperText Markup Language | MDN

When this meta tag is added, the browser takes the user’s color scheme preferences into consideration when rendering UA-controlled elements of the page (like a <button>). It renders colors for the root background, form controls, and spell-check features (as well as any other UA-controlled styles) based on the user’s preference.

[…]

Although themes are manually styled for the most part (which overrides the UA styles), informing the browser about the supported themes helps to avoid even the slightest chance of a potential FOIT situation. This is true for those occasions where HTML has rendered but CSS is still waiting to load.

— A Complete Guide to Dark Mode on the Web | CSS-Tricks

Tags
Dark mode
CSS - Media Queries