CSS Archives - Aurelio De Rosa blog

Trick of the day: CSS Scroll Snap Points

When you create a gallery, you usually want to implement a feature where every time the user clicks (or press the ENTER key) on an arrow, you move straight to the next (or previous) image. This effect can also be used to create a website that has several sections, each of which takes the full window’s height, where at each scroll you move the user to a new section. To achieve this goal, developers have always used JavaScript but the W3C has proposed a new standard called CSS Scroll Snap Points.

Trick of the day: CSS counters

Have you ever heard of CSS counters? It’s a feature of CSS for numbering non-consecutive items, wherever they might be in the DOM. It doesn’t have a lot of uses cases but it’s important to understand this kind of new features to understand how powerful is CSS today.

Resources for Beginner Front-end Developers

Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it’d have been nice to share the same suggestions on my blog. That’s exactly what you’ll find in this post.

Enhancing the abbr Element on Mobile

Today’s world runs fast, really fast. When writing, a lot of people use abbreviations and acronyms to save time that we can find spread all over the web. They are so used that an HTML tag, <abbr>, was created to identify them and help the semantic of web pages.

In this article, I’ll show you a small CSS snippet that can enhance how the <abbr> tag is shown on mobile devices.

How to Solve the Problem of @font-face Inside Media Queries

Mobile connections aren’t as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn’t work for some browsers: all the versions of Internet Explorer and FireFox 10 and lower. This article discusses a solution for this problem that balances performances and hacks.