5 useful CSS properties that get no love

2022-Jul-7

5 useful CSS properties that get no love

isolation

::marker

can affect the style of the triangle for <details> and the indicators for <li> for <ol> and <ul> plus other tags that use such indicators
example:
::marker{
    color: blue;
    font-size: 30px;
}


ul li::marker{
    content: "🙂";
}


to insert emoji in bluefish:
in Windows
in notepad
Windows key then ; key
or
Windows key then . (period) key
emoji window opens
select emoji
copy emoji and paste into bluefish


example example text
  1. list item 1
  2. list item 2
  3. list item 3

counters

w3schools.com: CSS Counters

To work with CSS counters we will use the following properties:

To use a CSS counter, it must first be created with counter-reset.

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

caret-color and accent-color

caret-color property not useful

accent-color, width, height properties are useful

The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

Example with default black color:

Example with blue color:

changing the caret-color property doesn't make it visually easier to see so of little use

 

The accent-color property specifies the accent color for user-interface controls like:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>.

with default accent-color:

Choice 1
Choice 2

Pick 0
Pick 1

with accent-color, width, height changed:

Choice 1
Choice 2

Pick 0
Pick 1

changing accent-color, width, height properties are useful visually

ch unit

fixing max-width centered text