{"id":626,"date":"2019-10-25T14:03:40","date_gmt":"2019-10-25T18:03:40","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=626"},"modified":"2019-10-25T14:05:50","modified_gmt":"2019-10-25T18:05:50","slug":"hooray-for-text-decoration-underline","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/hooray-for-text-decoration-underline\/","title":{"rendered":"Hooray for text-decoration: underline!"},"content":{"rendered":"<p>For years the first thing I would do on a new project is add <code class=\"css\">a { text-decoration: none; }<\/code> in some form or other to the styling of any website. However I was going to make links look, I was not leaving that offensive-looking <code class=\"css\">text-decoration:underline;<\/code> in place.<\/p>\n<p>But text-decoration is growing up and <a href=\"https:\/\/caniuse.com\/#feat=text-decoration\" target=\"_blank\" rel=\"noopener noreferrer\">browser support for the new options is improving<\/a>, including, for example, the increased support in the recent release of Firefox 70.<\/p>\n<p>My favorite feature is that underline can skip glyphs now, if you want! Followed almost immediately by my second favorite feature: <code class=\"css\">text-underline-offset: &lt;length&gt;;<\/code> There are more options than just &lt;length&gt;, read more on text-underline-offset here at <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-underline-offset\" target=\"_blank\" rel=\"noopener noreferrer\">MDN web docs<\/a>. Between these two <code class=\"css\">text-decoration: underline;<\/code> can actually look classy.<\/p>\n<p>Unfortunately, <a href=\"https:\/\/caniuse.com\/#search=text-underline\" target=\"_blank\" rel=\"noopener noreferrer\">support for text-underline-offset<\/a> is even less: Firefox and Safari at the moment. Glyph skipping specifically is <a href=\"https:\/\/caniuse.com\/#search=text-decoration-skip-ink\" target=\"_blank\" rel=\"noopener noreferrer\">supported much better<\/a> with text-decoration-skip-ink in Firefox, Chrome and Opera. And most browsers now support a shorthand version of text-decoration which can also set color. Lovely!<\/p>\n<p>Read more about all of it at <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration\" target=\"_blank\" rel=\"noopener noreferrer\">MDN web docs<\/a>.<\/p>\n<hr \/>\n<div class=\"_3bJ2H CHExY\">\n<div class=\"_1l8RX _1ByhS\">Photo by <a href=\"https:\/\/unsplash.com\/@photos_by_lanty?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener noreferrer\">Photos by Lanty<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/bunting?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener noreferrer\">Unsplash<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>For years the first thing I would do on a new project is add a { text-decoration: none; } in some form or other to the styling of any website. However I was going to make links look, I was not leaving that offensive-looking text-decoration:underline; in place. But text-decoration is growing up and browser support &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Hooray for text-decoration: underline!\" class=\"read-more button\" href=\"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/hooray-for-text-decoration-underline\/#more-626\" aria-label=\"Read more about Hooray for text-decoration: underline!\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[23,17,77,76],"class_list":["post-626","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-can-i-use","tag-css","tag-mdn-web-docs","tag-text-decoration","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=626"}],"version-history":[{"count":0,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/626\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}