We have a brand new theme for May’s CodePen Challenges. Some HTML elements are just made to come in pairs, so let’s celebrate them by coming up with some clever demos showcasing these HTML buddies.
In week one we looked at
The community took this humble pair in both playful and practical directions. Here are just a few of our favorites from week one.
Mindy recreates Maurice Moss’ emergency email in “<del> and <ins>”
Jonas Linn went the code dif route in “ins & del Diff”
Adrian Roselli demonstrates styles to make
<ins> more usable for screen readers, other languages, Windows High Contrast Mode, and print in “HTML Buddies: del & ins”
Mark Ostrander marks it up with red ink in “<del> and <ins>”
#codepenchallenge <del&rt; &
We’ve gathered up all of these and more from the
<ins> challenge in our collection #CodePenChallenge – Del & Ins.
Let’s do up
<summary> for week two!
Aside from some form elements, you don’t often think about HTML elements as having much functionality. They largely exist to apply meaning and style. But the
What do you click to do the toggling? Why its partner in crime the
<summary> element, of course!
- Details & Summary behave a lot like the accordion design pattern, only just the basics. Could you layer on functionality, like a group of details elements in which only one can be open at once?
- Can you progressively enhance Details & Summary to add custom styling and animation?
- These elements don’t work in Edge. You could have a look at the polyfills out there and perhaps build your own if you’d like to have a go at it.
- Here’s a CSS-Tricks post on Details & Summary that covers the basics and some simple styling possibilities.”,
- Details & Summary on MDN. Learn things like how the summary element is actually styled like a
- Try looking around CodePen for toggles. What are Details & Summary if not for a toggle that reveals content?”
Thanks to An Event Apart for sponsoring!
It’s a perfect match this week. An Event Apart‘s speakers aren’t merely industry leaders with years of experience and deep insight. They’re also engaging, inspiring thinkers who are passionate about sharing what they’ve learned and helping you level up your skills.