{"id":365110,"date":"2022-03-18T10:24:47","date_gmt":"2022-03-18T17:24:47","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&#038;p=365110"},"modified":"2022-03-29T12:20:42","modified_gmt":"2022-03-29T19:20:42","slug":"295-hidden-until-found","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/295-hidden-until-found\/","title":{"rendered":"295: Hidden Until Found"},"content":{"rendered":"\n<p><strong>[Chris]:<\/strong> Hey hey \u2014 it&#8217;s been about a week since we <a href=\"https:\/\/css-tricks.com\/css-tricks-is-joining-digitalocean\/\">announced the ownership transition of this site to DigitalOcean<\/a>. The outpouring of positivity and support has been overwhelming in the best sort of way. Even my comrades <a href=\"https:\/\/geoffgraham.me\/thank-you-chris\/\" rel=\"noopener\">Geoff<\/a> and <a href=\"https:\/\/www.robinrendle.com\/notes\/an-ode-to-css-tricks\/\" rel=\"noopener\">Robin<\/a> took a moment to write something marking the occasion. &#x1f9e1;<\/p>\n\n\n\n<p><strong>Reminder!<\/strong> If you&#8217;d like to keep getting this newsletter going forward, <a href=\"https:\/\/anchor.digitalocean.com\/DigitalOcean-CSSTricks-Subscribe.html\" rel=\"noopener\"><strong>you have to opt-in<\/strong><\/a> to that. &#x1f64f; <\/p>\n\n\n\n<p>Let&#8217;s look at some &#x1f525; links I&#8217;ve been eyeing up this week.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"better-details\">Better Details<\/h3>\n\n\n<p><a href=\"https:\/\/www.zachleat.com\/web\/details-utils\/\" rel=\"noopener\">This is just an outstanding idea<\/a> from Zach: make the already very useful <code>&lt;details><\/code> element even more useful! And the implementation is <code>:chefs-kiss:<\/code>! Just wrap it in a capital W Web Component (and load and instantiate the script). <\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;details-utils>\n  &lt;details>\u2026&lt;\/details>\n  &lt;!-- you can have one or more &lt;details> elements in here -->\n&lt;\/details-utils><\/code><\/pre>\n\n\n\n<p>With that in place, you get five benefits that are all awesome:<\/p>\n\n\n\n<ul><li>Force open\/closed (e.g. leave open on desktop but force closed on mobile)<\/li><li>Click outside to close (e.g. like most menus work)<\/li><li>Close on&nbsp;<code>esc<\/code> (e.g. like most menus and modals work)<\/li><li>Animate open\/closed (e.g. to aid in interface understandability)<\/li><li>Toggle root element&nbsp;<code>class<\/code> (e.g. you can already style the details with <code>[open]<\/code>, but this is for styling the entire page, like <code>html.page-menu-is-open<\/code>. Perhaps you want to darken the rest of the page?)<\/li><\/ul>\n\n\n\n<p>Zach was saying he uses <code>&lt;details&gt;<\/code> a lot, even for things like the main navigation on massively popular websites. Which got me thinking about the accessibility of all that. I know for sure that you can&#8217;t put anything you want your own semantics with inside the <code>&lt;summary&gt;<\/code> (<a href=\"https:\/\/daverupert.com\/2019\/12\/why-details-is-not-an-accordion\/\" rel=\"noopener\">see Dave&#8217;s post<\/a>) (e.g. don&#8217;t think you&#8217;ll get a proper header out of <code>&lt;summary&gt;&lt;h3&gt;...&lt;\/h3&gt;&lt;\/summary&gt;<\/code>). But what about interactive elements inside the <em>rest<\/em> of the details area? I was talking to Melanie about that and she <a href=\"https:\/\/github.com\/MelSumner\/test-details\" rel=\"noopener\">launched her own research about it<\/a>. In the end, personally, I&#8217;m not <em>that<\/em> worried about. But Melanie did note at least one awkward moment. Like if you use details for a menu, there isn&#8217;t a lot of heads up for a screen reader use that they are headed for a list-of-links:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8220;User Menu button collapsed&#8221;<\/p><p>Once you press the button (technically here the summary element, although the entire elements stays focused), it will announce something like:<\/p><p><span style=\"color: initial; font-family: Blanco, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;\">&#8220;User Menu button expanded&#8221;<\/span><\/p><p>You can then press TAB (or VO + TAB in Safari) to navigate to the next interactive element, which in this case would be the &#8220;Home&#8221; link and would be read (in most cases) like, &#8220;list with three items. home, link.&#8221;<\/p><p>Technically this works, even if it&#8217;s a bit confusing to use with a screen-reader. I expected a disclosure widget andnow I&#8217;m in a list with links?<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"block-party\">Block Party<\/h3>\n\n\n<p>I&#8217;m sure there are plenty of holdouts still, but it&#8217;s exceedingly clear that the Block Editor is the future of WordPress. I don&#8217;t know if I was an early adopter, but got on board as quick as I could, and have <em>really<\/em> enjoyed this block-based approach to content-building. I admit it was building my own blocks that felt like the best part, despite the fact that it&#8217;s a little harder than I might want it to be. Alex Riviere <a href=\"https:\/\/alex.party\/posts\/2022-02-19-my-first-impression-of-making-a-wordpress-gutenberg-block\/\" rel=\"noopener\">documented his first journey into block building<\/a> and it&#8217;s helpful.  He found it easier than I did. I&#8217;d reach for <code><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" rel=\"noopener\">@wordpress\/scripts<\/a><\/code> for <em>sure<\/em>. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"olympe-mono\">Olympe mono<\/h3>\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/aisforfonts.com\/olympe\" rel=\"noopener\">Olympe<\/a> is a monospace font revived from an Olympia typewriter. Its interesting shapes come from combining writing with the mechanical process of a typewriter which can only provide monospaced signs. Olympe gives a cursive but sometimes broken flow to the text, she is clumsy and charming.<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/aisforfonts.com\/olympe\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"955\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-2.42.40-PM.png?resize=1024%2C955&#038;ssl=1\" alt=\"\" class=\"wp-image-365118\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-2.42.40-PM.png?resize=1024%2C955&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-2.42.40-PM.png?resize=300%2C280&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-2.42.40-PM.png?resize=768%2C716&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-2.42.40-PM.png?resize=1536%2C1433&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-2.42.40-PM.png?resize=2048%2C1910&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><\/figure>\n\n\n\n<p>That&#8217;s just fun.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-was-lost-but-now-im-found\">I was lost but now I&#8217;m found.<\/h3>\n\n\n<p><a href=\"https:\/\/github.com\/WICG\/display-locking\/blob\/main\/explainers\/hidden-content-explainer.md\" rel=\"noopener\">This is such a super weird explainer<\/a> for a web platform hopeful. So we already have:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div hidden>This is hidden content.&lt;\/div><\/code><\/pre>\n\n\n\n<p>But <code>hidden<\/code> as an attribute isn&#8217;t all the popular, probably because as Monica says, <a href=\"https:\/\/meowni.ca\/hidden.is.a.lie.html\" rel=\"noopener\">it&#8217;s a lie<\/a>. This idea expands it to:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div hidden=\"until-found\">This is hidden content.&lt;\/div><\/code><\/pre>\n\n\n\n<p>Which feels like some kinda Christian folk song but ok. The idea is that the element is quite literally hidden until you use the browser&#8217;s <strong>find<\/strong> command and it finds text that the element contains. At a glance, I was like&#8230; is this just for easter eggs or maybe to help make <a href=\"https:\/\/codepen.io\/TomerKotzer\/pen\/BpLEPp\" rel=\"noopener\">Konomi code<\/a> implementation easier or what. But I brought it up while <a href=\"https:\/\/shoptalkshow.com\/\" rel=\"noopener\">chatting with Dave<\/a> and he had a bunch of ideas. I also could probably read the article a little more closely as some of the ideas right in the document are pretty sweet. <\/p>\n\n\n\n<p>Truth be told, it is kind of annoying that find-on-page in browsers doesn&#8217;t find text that just so happens to be in a temporarily hidden element. Say a menu that just isn&#8217;t open right now, now a collapsed accordion situation. I would suggest that they attempt to make this jive with <code>&lt;details&gt;<\/code> somehow (rather than thinking of it as an alternative). <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-real-added-costs-of-accessibility\">The real added costs of accessibility<\/h3>\n\n\n<p>&nbsp;<a href=\"https:\/\/www.joedolson.com\/2022\/01\/the-real-added-costs-of-accessibility\/\" rel=\"noopener\">Joseph Dolson<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>Accessibility is not expensive; inaccessibility is cheap.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"every-element-is-an-html\">Every element is an html<\/h3>\n\n\n<p><a href=\"https:\/\/whykatherine.github.io\/every-element-is-an-html\/\" rel=\"noopener\">This<\/a> seems important. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-3.50.04-PM.png?resize=1024%2C562&#038;ssl=1\" alt=\"\" class=\"wp-image-365125\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-3.50.04-PM.png?resize=1024%2C562&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-3.50.04-PM.png?resize=300%2C165&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-3.50.04-PM.png?resize=768%2C421&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-3.50.04-PM.png?resize=1536%2C843&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-17-at-3.50.04-PM.png?resize=2048%2C1124&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>My favorite is iframe.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Don&#8217;t forget to <a href=\"https:\/\/anchor.digitalocean.com\/DigitalOcean-CSSTricks-Subscribe.html\" rel=\"noopener\">re opt-in to this newsletter<\/a> if you want to keep getting it, and keep in mind that DigitalOcean is <a href=\"https:\/\/try.digitalocean.com\/css-tricks\/?utm_source=css-tricks.com&amp;utm_medium=cta&amp;utm_campaign=website_link\">offering $100 in credit<\/a>, which should be awfully useful for the next server you need to spin up. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[Chris]: Hey hey \u2014 it&#8217;s been about a week since we announced the ownership transition of this site to DigitalOcean. The outpouring of positivity and support has been overwhelming in the best sort of way. Even my comrades Geoff and Robin took a moment to write something marking the occasion. &#x1f9e1; Reminder! If you&#8217;d like [&hellip;]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/365110"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/newsletters"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/365110\/revisions"}],"predecessor-version":[{"id":365178,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/365110\/revisions\/365178"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=365110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}