In this tutorial, we will be using Pseudo-elements, CSS Custom Properties and Media queries to change an image description according to screen size or other conditions. This can work for other things too, obviously, such as button text, menus, etc. The primary purpose of this tutorial is to show how you can use Custom Properties to achieve this effect.
Notice: whenever you change your screen size to match one of the covered sizes, the contents of the label change to match.
First, we must set up a custom property (CSS Variable), '--contents' , which is responsible for holding the text your label will display.
The appearance of your label is up to you; you could simply use an
unstyled label if that's what you need. In fact, it could be any
element, as the important part is what your CSS does with it.
For that, we can use a pseudo-element, such as
'::after'(recommended;
if you want your custom text to appear after a set of predefined
text. Use before if you want it to appear *before* your existing
text).
We've already set up our custom property at the top of the document,
'--contents'. Now all
you need to do is set up a number of media queries, which will change
the value of '--contents',
depending on various conditions, in this case, screen size.
Media queries are even more powerful than this however. You can view
a full list of possibilities here
Custom properties can be used for just about anything in CSS, and can even be nested! With this in mind, you can use another custom property to set 'display:' to 'none' at certain sizes or under certain conditions, or, to swap one element for another. Of course, you don't *need* custom properties for this; you could already simply use the same class and change it's properties within a query. However, custom properties open up the door for more possibilities, including running calculations!
One of the biggest benefits of the method described in this tutorial is that you get to reduce the level of duplication in your markup (no need for multiple elements to display changing content). But! That's not all you can do! CSS Custom Properties open the door to some fascinating possibilites - too numerous to cover here, so look out for some more useful ideas in the future.