blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}Collecting some frontend related notes, thoughts, bookmarks and tips.
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.
https://www.magentaa11y.com/web/ lets you create a comprehensive testing guide for all elements on your page.
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}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!
Google Fonts can and should be served locally instead of from google. This tool can be used to download the font files: https://google-webfonts-helper.herokuapp.com/fonts
I was recently working on the relaunch of my website and wanted to include the open source font Inter. Unfortunately, even the woff2 versions of each different font style were at least 100kb large. As I wanted to use three font styles, this was, of course, way too much. […]