CSS – Interesting Techniques of the Previous Year

CSS (Cascading Style Sheets) is a simple styling language used to format websites. Because of ever increasing design demands, it is constantly changing and upgrading. Some interesting new functionalities, that were added in the previous year were an increased first letter, variable fonts, logical properties and values, scroll snapping, test for browser support and improvements to the media query.

The initial letter allows us to easily create a larger first letter, which can also take up space in lower rows. To change the size of the letter, we use the ::first-letter selector, which selects the first letter and then we design it by first specifying the row height property, which defines how many rows the letter will take up, and then we specify the number of rows the letter will take up in depth.

p::first-letter {
    -webkit-initial-letter: 4 3;
    initial-letter: 4 3;
}

In this example, the letter will be 4 rows tall and 3 rows deep. If we want to reset it to the default value, we use the value initial-letter: normal. The functionality is currently functional only in Safari.

Until now, when using custom fonts, it was necessary to load different types of the same font type (different thickness, italic, …), which requires more calls and different types of files to load. Variable fonts is an OpenType file type, which contains all the forms of a font in a single file and simplifies integration of the font and decreases the number of files that the browser needs to download.

When using the values for height and width, the element will retain its size, regardless of mirroring or rotating. If an element that doesn’t have the same size turns for a quarter of a full turn, the layout of the neighboring elements will be deformed. With logical elements however, we can control the size of an element and the space it takes up in logical directions. This way it is much easier to control the space that the element takes up. There are 2 properties to choose from: block-size for the vertical size of the element and online-size for the horizontal size of the element.

block-size: 100px;
inline-size: 200px;

Scroll snapping is a function that allows us to set a point at which the top of the screen or an element stops (or snaps), for example at a title or the top of the element. In the element, that is moving, we define the type, which can be none, proximity or mandatory.

scroll-snap-type: y mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: y mandatory;

If none is selected, it won’t stop on the selected element, if it is set to proximity, it will stop on the element only when we are close to a part of the element. If it is set to mandatory, we can only move between elements with the property scroll-snap-align. Options for scroll-snap-align are none, start, end and center.

scroll-snap-align: none;
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;

CSS developed a test regarding the support of new features in browsers (feature query). In this way, we can check if a function works in a browser. If it does, it will be used, otherwise it won’t.

@supports (display: grid) {
    div {
        display: grid;
    }
}

A media query is used to format elements of different media. Additional functions provide a simpler overview of size as they allow us to select the size based on the range.

Until now, the range could be defined by the prefixes min- and max-

@media (min-width: 800px) and (max-width: 1000px)

With these new functionalities, it is possible to use logical operators, which simplifies the syntax and the overview of the size.

@media (800px <= width <= 1000px)

Because these functions are new, they are supported only in the most recent versions of some modern browsers, such as Chrome, Firefox and Safari. Some browsers however do not integrate certain functions, so their use is not and will not be possible.

Leave a Reply

Your email address will not be published. Required fields are marked *