Add Show Full URLs With Print Styles as a CSS TIL

README.md

@@ -10,7 +10,7 @@ working across different projects via [VisualMode](https://www.visualmode.dev/).
 
 For a steady stream of TILs, [sign up for my newsletter](https://visualmode.kit.com/newsletter).
 
-_1893 TILs and counting..._
+_1894 TILs and counting..._
 
 See some of the other learning resources I work on:
 
@@ -229,6 +229,7 @@ If you've learned something here, support my efforts writing daily TILs by
 - [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md)
 - [Prevent Invisible Elements From Being Clicked](css/prevent-invisible-elements-from-being-clicked.md)
 - [:root Has Higher Specificity Than html](css/root-has-higher-specificity-than-html.md)
+- [Show Full URLs With Print Styles](css/show-full-urls-with-print-styles.md)
 - [Style A Background With A Linear Gradient](css/style-a-background-with-a-linear-gradient.md)
 - [Using Maps In SCSS](css/using-maps-in-scss.md)
 

css/show-full-urls-with-print-styles.md

@@ -0,0 +1,46 @@
+# Show Full URLs With Print Styles
+
+Web pages are best experienced in a browser where you can fully interact with
+them. Links, for instance, can be hovered, inspected, and clicked on to navigate
+to the target location -- that's a core part of the web browser experience and
+what makes the internet.
+
+Some people have printers though and they want to be able to print off web
+pages. Any web page can be printed off as is, but if your site or app is
+anticipating certain pages being printed, then you may add some
+`@print`-specific CSS styling to improve how it looks in print format.
+
+Links are a prime example of lost interactivity. When printed, links render as
+blue underlined text with no way to know what they are linking to. One trick
+that I recently picked up from [this lobste.rs thread](https://lobste.rs/s/olnqh2/websites_should_be_printable#c_wigxfy) is to
+add _after content_ that renders the actual, full URL next to the link.
+
+```css
+@media print 
+{
+  a[href]:after
+  {
+    content: " [" attr(href) "]";
+  }
+}
+```
+
+This means that when a page has `<a href="https://still.visualmode.dev">still</a>`, the printed version will not
+just render the word "still", but will be styled to render `still [https://still.visualmode.dev]`.
+
+This will add content after links for both absolute URLs and relative paths (and
+anchor tags). If I wanted to limit the after content to only show absolute URLs,
+I could add a bit more specificity to the matching tag.
+
+```css
+@media print 
+{
+  a[href^="http"]::after
+  {
+    content: " [" attr(href) "]";
+  }
+}
+```
+
+The `^=` matches the pattern of `http` on the start of the `href` string which
+means it will only display absolute URLs.