The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility proper
短い答え ::beforeはCSS3の構文 :beforeはCSS2の構文 ということで、CSS3の::beforeを使う。 ていうか、そっちが推奨されてます。 以上です😎 ほんとにダブルコロンのほうでいいの? その昔、CSS2しかサポートしない古いブラウザ(IE8以下)対応のためにシングルコロンの:beforeを使うこともあったようですが、2020年8月現在でIE8のサポートが必要なことって、もうないですよね?あるのかな?ないですよね? シングルコロンの:beforeは最新のブラウザでもサポートされていて使えますが、特異な理由でIE8をサポートするなどでないかぎり、ダブルコロンで記述するのが良さそうです。 そもそも、2つのコロンで記述する擬似要素と1つのコロンで記述する擬似クラスを区別するために、CSS3で::beforeが導入されたそうです(MDNの記事中のメモ を参照)。 ダブルコ
MetadataDateJuly 18, 2020ByNicky MeulemanTaggedHowtoCSSOlder postSyntax highlighting codeblocks with theme-ui Newer postLove errors Table of contentsGoalUse the backgroundTwo backgroundsTransitioning the Three backgroundsTransitioning the Tada 🎉 Underlines are hard. Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline. There are a lot of
Spoiler: it dependsOne of the CSS units I use most is the wonderful % — so handy for positioning elements on the page. Unfortunately, the rules aren’t exactly straightforward. One question I’m always asking myself is: Percent of what?Hopefully this guide can help clear things up. Just give me the gist!#The basics: width & heightIn these examples, the purple box is our lovely self element — this is
I keep seeing authors and speakers refer to the ch unit as meaning “character width”. This leads to claims that you can “make your content column 60 characters wide for maximum readability” or “size images to be a certain number of characters!” Well… yes and no. Specifically, yes if you’re using fixed-width fonts. Otherwise, mostly no. This is because, despite what the letters ch might imply, c
Popular CSS I learned how to build websites the old fashioned way: looking at website source code and trying to replicate the things I saw. I threw in the odd book for the stuff I couldn’t see (like PHP/MySQL), and I was on my way. This was back in 1999, when we’d write things like <font size="4" color="#000000"> and DHTML was a thing. When CSS came along my approach to learning didn’t differ. But
No Class CSS Museumという No-Class CSS フレームワーク比較サイトを作りました。 簡単な demo 用のコードに何かスタイル当てたいけど、そんなに時間かけたくないしそもそもデザインセンスないしどうしようかなってときに No-Class CSS フレームワークが便利です。 たとえば昨日公開したFirebase の存在をフロントエンドから隠蔽するためにのデモサイトもそういった No-Class CSS フレームワークであるnew.cssを使いました。 これは CSS ファイルを読み込んだだけ(タグにクラスを割り振ったりしていない)なのですが、それだけでいい感じにスタイルが当たってちょっと感動しました。 以前の記事であるブログの 1 ヶ月を振り返るに書いた通り、このブログは書いた内容のサンプルコードやデモをどんどん公開していく方針で運営しています。 ただ、なにもスタ
In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you're just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision. But don't take things for granted: despite being over 20 years old, there'
Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation. 👀 If you've got a static site with a scrollable sidebar, it really helps to memorize the scroll position across page loads. (left is default, right memorized) pic.twitter.com/bLgtILP1JP — Hakim El Hattab (@hakimel) May 18, 2020 The trick is to throw the scroll position i
In this article, we’ll walk through the design and implementation of the prefers-contrast media query in Firefox. We’ll start by defining high contrast mode, then we’ll cover the importance of prefers-contrast. Finally, we’ll walk through the media query implementation in Firefox. By the end, you’ll have a greater understanding of how media queries work in Firefox, and why the prefers-contrast que
There are a lot of CSS properties that some don’t know about, or they know about them, but forget to use them when they’re needed. Some of those can save you using JavaScript to achieve a specific result, or some can save your time by writing less CSS. As a front-end developer, I came across such things every now and then, and I asked myself, why not list all those less-used and interesting CSS pr
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered,
Front-end education for the real world. Since 2018. If there’s one thing you can guarantee in tech, it’s that someone, somewhere, will declare that CSS isn’t up to the job of “big projects” and what will undoubtedly be recommended by those same people will be either a JavaScript-heavy approach or some sort of all-in utility class approach like Tailwind. There’s mostly nothing wrong with these appr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く