I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this “floating section headers” example, reminding me yet again how satisfying definition lists can be.
With nice simple 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 (formerly Swaziland)</dd> <dd>Ethiopia</dd> </dl>
</div>The default browser styling — no CSS at all — looks like this:
So, each of those <dt>s, in this case, happen to be nicely tucked away to the left in the space that the margin-inline-start makes for the <dd>s. Which means that in extremely little CSS we can kick on that “stick sections” concept:
dt { position: sticky; top: 0; background: white; display: inline-block;
}I love the simplicity of that.
And now that the core “functionality” works, the rest of the styling is just aesthetic sugar:
The version on 30 seconds of code uses a CSS Grid layout for the list items, which admittedly is more robust. I just thought it was interesting how close you can get in so little CSS without it. They also have a version where the <dt>s stretch the whole width which is also nice.
The post Sticky Definition Lists appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.