Sticky Definition Lists

I ran throughout this 30 seconds of code web site the opposite day, and so they have a CSS part which is actually good! The primary instance snippet I checked out was this “floating part headers” instance, reminding me but once more how satisfying definition lists might be.

With good easy HTML like this:

<div class=”floating-stack”>
<dl>
<dt>A</dt>
<dd>Algeria</dd>
<dd>Angola</dd>

<dt>B</dt>
<dd>Benin</dd>
<dd>Botswana</dd>
<dd>Burkina Faso</dd>
<dd>Burundi</dd>

<dt>C</dt>
<dd>Cabo Verde</dd>
<dd>Cameroon</dd>
<dd>Central African Republic</dd>
<dd>Chad</dd>
<dd>Comoros</dd>
<dd>Congo, Democratic Republic of the</dd>
<dd>Congo, Republic of the</dd>
<dd>Cote d’Ivoire</dd>

<dt>D</dt>
<dd>Djibouti</dd>

<dt>E</dt>
<dd>Egypt</dd>
<dd>Equatorial Guinea</dd>
<dd>Eritrea</dd>
<dd>Eswatini (previously Swaziland)</dd>
<dd>Ethiopia</dd>
</dl>
</div>

The default browser styling — no CSS in any respect — seems to be like this:

So, every of these <dt>s, on this case, occur to be properly tucked away to the left within the area that the margin-inline-start makes for the <dd>s. Which implies that in extraordinarily little CSS we are able to kick on that “stick sections” idea:

dt {
place: sticky;
prime: 0;
background: white;
show: inline-block;
}

I really like the simplicity of that.

And now that the core “performance” works, the remainder of the styling is simply aesthetic sugar:

The model on 30 seconds of code makes use of a CSS Grid format for the listing objects, which admittedly is extra strong. I simply thought it was attention-grabbing how shut you may get in so little CSS with out it. Additionally they have a model the place the <dt>s stretch the entire width which can be good.

The publish Sticky Definition Lists appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.