By @edent · css HTML Web Development · 5 comments · 400 words · read ~986 times.
How do you know where this link goes to? If you're on a desktop, you might notice that hovering your mouse over it displays the destination somewhere on your screen. If you're a geek, you could view the source-code of a page. Can we improve the experience for users? Here's an attempt. Try hovering your […]
Continue reading →By @edent · css HTML · 4 comments · 200 words · read ~3,329 times.
A fun little CSS experiment! There's a new(ish) feature in CSS which allows you to set the way text is wrapped. Ordinarily, a long line of text might be split at an inopportune time. For example: This very long headline ends with a single word Having a dangling word doesn't always look great. Using text-wrap:balance […]
Continue reading →By @edent · css HTML · 7 comments · 250 words
Suppose you have lots of links on a page. You want to highlight the ones which point to example.com - is that possible in CSS without using JavaScript? Yes! This scrap of code will turn all those links red: a[href^="https://example.com"] { color: red; } Now, there are a few gotchas with this code. It matches […]
Continue reading →By @edent · css HTML Web Development · 4 comments · 300 words
I am a bear of very little brains sometimes. I had a site which, for various boring reasons, was printing a <style> element in the middle of the HTML's body. Because <style> is a metadata element, it should only appear within the <head> element. This is OK: <!doctype html> <html> <head> <style> a { color: […]
Continue reading →By @edent · css emoji font HTML · 9 comments · 750 words · read ~569 times.
I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text. Is there a way to use CSS to increase the font size of specific characters without having […]
Continue reading →By @edent · css · 8 comments · 300 words · read ~290 times.
Do you know about the EURion constellation? It is a pattern which is embedded into some modern banknotes and has a curious property. Most modern photocopiers will, if they detect the pattern, refuse to make a copy. Try it for yourself - stick a €20 note into your nearest Xerox machine and try to print […]
Continue reading →By @edent · css design history HTML · 9 comments · 850 words · read ~6,231 times.
How do you know you're looking at an old website? You may have found a page which has lots of interesting information, but how can you tell it's a modern and relevant result? Some websites don't contain dates in their URls. There may not be a © date or publication date shown on the page. […]
Continue reading →By @edent · css HTML · 6 comments · 650 words · read ~346 times.
Yesterday I wrote about a lazy way to implement a manual dark mode chooser. Today I'll show you a slightly more sensible way to do it. It just uses CSS, no need for JavaScript. Here's a scrap of HTML which present a dropdown for a user to choose their colour scheme: <select id="colour-mode"> <option value="">Theme […]
Continue reading →By @edent · accessibility css HTML · 3 comments · 300 words
I'm not saying this is a good way to make a dark mode website. I'm not even saying it's a sensible way to do dark mode. But I'm pretty sure this is the laziest way of getting dark mode on your site. And it is all done with less than a handful of CSS rules. […]
Continue reading →By @edent · css HTML5 · 1 comment · 150 words
Sometimes you learn the most from failures! I wanted a <select multiple> element where the <options> were laid out in a grid. I nearly got there. It's possible to have the <option>s in a horizontal row - but only on Chrome and Firefox. Here's a quick fiddle showing the results: As you can see, it's […]
Continue reading →