CSS
Change the Text Selection colour
::selection is a pseudo-element that overrides at the
browser-level to replace the text highlight colour
with a colour you choose. The colour can be seen
once you select the content with the cursor.::selection {
background-color: #f3b70f;
}@support
Whenever you want to use a CSS property not
supported by all browsers, there is a feature query
called the @support rule. This enables you to check
the browser support for CSS property: value pairs.
The code included in the @support block will be
rendered only if these conditions are true.
If the browser doesn’t understand @support, it
doesn’t generate a given part of the code either.@supports (text-stroke: 4px navy;) {
.example {
text-stroke: 4px navy;
}
}Although some properties may still experience
problems with the browsers’ compatibility, don’t
hesitate to play with them. While your browser
support may be limited now, these will likely become
mainstream practices in the future. It is just a matter
of time. If you would like to ensure these effects
only load on browsers that can render them, use the
@supports rule to wrap the styles.
If you would like further inspiration, Jen Simmons
and Mozilla launched a new YouTube channel of
videos about web design and development,
including tools and techniques, what’s new and best
practices. Additionally, you can also find out how to
test colour contrast and simulate colour blindness
using Firefox DevTools.Above left While data
visualisation libraries like
d3.js offer comprehensive
charting functionality, for
simple pie charts why not
try CSS?
Above right CSS
counters let you adjust
the appearance of content
based on its location in
a document, offering a
handy hack for styling
numbered listsconsisting of a gradient with set colour transitions
rotated around a central point (rather than
radiating from the central point as you’d find with a
radial-gradient).
.piechart {
background: conic-gradient(rgb(255, 132, 45) 0% 25%,
rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%);
border-radius: 50%;
width: 300px;
height: 300px;
}
Styling numbers in a numbered list
To style numbers in a numbered list, we need to play
with properties called CSS counters. CSS counters
let you adjust the appearance of content based on its
location in a document.
To use CSS counters:
O The counters’ value can be increased or decreased
by counter-increment
O We can display the value of the counter by using
the counter() or counters() function from within a
content property.
ol.numbered-list > li:before {
content: counter(li);
position: absolute;
box-sizing: border-box;
width: 45px;
height: 45px;
background: #f3b70f;
border-radius: 50%;
}
ol.numbered-list li {
position: relative;
left: 0px;
list-style: none;
counter-increment: li;
}