Snippets
line-gap-override, ascent-override and descent-override CSS properties
[T]he
line-gap-override,ascent-overrideanddescent-overrideCSS properties […] allow developers more control over how fonts are displayed. The following snippet shows just how useful these properties are when using a local fallback font:
Code language: CSS
@font-face {
font-family: web-font;
src: url("<https://example.com/font.woff>");
}
@font-face {
font-family: local-font;
src: local(Local Font);
ascent-override: 90%;
descent-override: 110%;
line-gap-override: 120%;
}
These […] properties help to reduce layout shift when fonts are loading, as developers can better match the intricacies of a local font with a web font. They work alongside the
size-adjustproperty[.]
Rachel Andrew on why the CSS is Awesome meme is actually a good thing and how to fix it
[T]he problem highlighted by the CSS is Awesome meme […] is an issue of overflow. You have made a fixed width container and are trying to put content into that container which is too big, what do you want CSS to do here?
CSS by default will do what you see in the meme because to do anything else would cause data loss, which [in] CSS terms means that some of your content vanishes.
We try and avoid data loss because if something on your page vanishes at certain screen sizes – because of overlap, or it going off the side of the screen, you may be unaware of it. A quick eyeballing of the page may not cause something missing to jump out at you. You will tend to spot the messy overflow though.
A good example of this design pattern can be seen in the Box Alignment specification, with the safe and unsafe alignment keywords. Safe alignment, means that your chosen alignment method won’t be used if it causes data loss, unsafe means that data loss may happen.
[…]
Better ways to stop content just “honking out of the box”
The author of the meme wondered why the box didn’t grow to fit the content. However if you give something a fixed size in CSS, it will respect that size. What the author really wanted was to make the box
min-contentsized. With a box that has a width ofmin-contentthe box will grow as big as it needs to be to contain the content, with all soft-wrapping opportunities taken, but no bigger.If instead, you want to make the box not wrap at all, then give it a width of
max-content. The text will then display all as one line and take no soft-wrapping opportunities.Perhaps you need to have the box that fixed width, but don’t mind if it grows taller. In that case use
overflow-wrap: break-word.Take a look at [this CodePen] for all your awesome possibilities.
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.
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:
- The number of elements that require layout.
- 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.