The "all" CSS property

The programmes details at Csaydimba are on top of each other like a stack of cards.

Our goal was, once a user clicks on the programme title, the programme details view should show.

So, to make sure the list item is accessible to assistive technologies and keyboard users we nest the content into a button element in the li element. Because the button element is a focusable element.

Consider the following markup

<ol>
    <li>
        <button>Product Design</button>
        <div>
            <!-- program details comes here -->
        </div>
    </li>
    <li>
        <button>Front-end Engineering</button>
        <div>
            <!-- program details comes here -->
        </div>
    </li>
    <li>
        <button>Back-end Engineering</button>
        <div>
            <!-- program details comes here -->
        </div>
    </li>
</ol>

And consider the following style

button {
    all: inherit;
    /* other declarations */
}

The good button element comes with it package of styles. So, to make sure the button feel like the list item we use the all CSS property to reset it.

The all shorthand CSS property resets all of an element’s properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.