Collecting some frontend related notes, thoughts, bookmarks and tips.
In this post I want to give a short example why there is in my opinion a better way than using a Mobile First approach when writing CSS. Please note that for simplification I will refer to viewports as well as media queries, but the same concept also applies to anything that can be controlled by media and container queries. […]
Implementing a light and dark theme based on the user's OS settings has become quite popular. But often users just want their OS to be dark, while they prefer reading a website with a light background, for example. It is therefore considered good practice to offer a theme toggle, that allows the user to change the theme of the website regardless of their OS theme. […]
If an element is hidden via visibility: hidden, its subtree can be made visible by using visibility: visible:
parent {
visibility: hidden;
}
child {
visibility: visible;
}Without rounded corners:
border: solid 0.25rem;
border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);With rounded corners:
border: solid 0.25rem transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;Drawback: You need to set a solid color as background, so it cannot be transparent.
With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):
font-variant-numeric: tabular-nums;This can be helpful for example for tables or when displaying prices below each other.
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}@media print {
@page {
size: landscape;
}
}At the time of the tweet, it worked in blink only.
I can never remember this snippet:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));This will create equally sized columns, where 20rem is the minimum width of the columns. When they would become smaller than this, the last entry in a row moves to the next row.
We use min(100%, 20rem) to avoid overflow when the container is smaller than 20rem.
Hiding elements visually, but keeping them for screen readers:
.u-hiddenVisually {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}My by far most used utility class.
If you want to use an inline SVG in a CSS file: https://yoksel.github.io/url-encoder/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;or
font: 1rem/1.2 BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;The shorthand version cannot start with -apple-system!
One reason frontend development never becomes boring is the fact that the available technologies evolve rapidly. Browser vendors publish new features every few weeks, which makes it hard to stay up-to-date. At the same time it also makes development much easier as as a lot of functionality gets introduced by the new browser versions. […]