As my grandma used to say, “there’s only one thing worse than a scroll-linked positioning effect and that’s not being able to scroll at all”. So, with this in mind I have written a temporary fix for the issue in the latest version of HERE Maps that prevents users from scrolling past the map withContinue reading “Here Maps Scroll Wheel Temporary Fix”
The original question for the below answer was wanting to hide a link when a button that’s next to the link has a “selected” class. This is interesting because this requires a sibling selector, but sibling selectors in CSS are a bit funky… with a sibling selector, the target element is always _subsequent_. That meansContinue reading “Using Sibling Selectors to Style the Element Before the Match”
There is a problem I have wrestled with a couple of times, which was frustrating to solve… but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS nuggets, such as min and maxContinue reading “CSS Clamp: The Goldilocks of CSS Math Functions”
The toggle switch has very suddenly become a ubiquitous feature of web user interfaces. You can’t hardly fill in an HTML form these days without finding one; especially as 99% of forms we now fill in are concerned with “cookie consent”. Why isn’t the toggle switch a first-class citizen of HTML, you may ask… toContinue reading “HTML Challenge: Toggle Switch vs Checkbox”
A common problem with images, especially if they are user-generated, is that they don’t have the correct aspect ratio for their intended purpose. Also, as we re-flow pages for many different devices, we often want the image to work with different aspect ratios. This is where the CSS object-fit property comes in very useful. ThereContinue reading “Fixing CSS object-fit for Internet Explorer”
When HTML5 was created, the new elements came from a study of class names from millions of websites. If HTML5 was conceived today, the new elements would probably have been called “container” and “col-md-6”.
This is just a nod to the handy little Visual Studio Code Extension: Preview on Web Server. Now you can configure a task, or run a command, or set up a local web server yourself… but why not just install this extension and then just hit CTRL + SHIFT + L to load the webContinue reading “Visual Studio Code Extension: Preview on Web Server”
There is often a bit of confusion surrounding the CSS sibling selector, or ~ as it is known to its friends. Here is how it works. This CSS translated into English says: If there are is a paragraph next to another paragraph inside a division, make the text red Here is an example HTML snippetContinue reading “The CSS Sibling Selector”