diff --git a/README.md b/README.md index 915bc84..204a61b 100644 --- a/README.md +++ b/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) diff --git a/css/show-full-urls-with-print-styles.md b/css/show-full-urls-with-print-styles.md new file mode 100644 index 0000000..a871f39 --- /dev/null +++ b/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 `still`, 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.