For many years, Can I Use? has been the go-to place to find out whether a browser supports a certain feature, like CSS aspect-ratio. However, what do you do when you need to add some additional styling if the browser doesn’t support a feature? Well, in an almost paradoxical way – you can use theContinue reading “Check CSS Support in CSS Using @supports Rules”
Tag Archives: css
Articles related to cascading style sheets (CSS).
Using Sibling Selectors to Style the Element Before the Match
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”
It’s Time to Support CSS Dark Mode
We have now reached the tipping point with dark mode on The World Wide Web. Support has reached the point of broadness that means users who are browsing on their mobile phones are going to notice what you are doing to their eyes if you don’t support it. We will soon pass from “users areContinue reading “It’s Time to Support CSS Dark Mode”
CSS Clamp: The Goldilocks of CSS Math Functions
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”
Fixing CSS object-fit for Internet Explorer
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”
Minification Failed. Returning Unminified Contents.
Has you ASP.NET applicaiton reported that minification failed? If you are using bundles in application, you might come across this exception comment at the top of your larger-than-expected bundle file. /* Minification failed. Returning unminified contents. (List of problems here) */ It can happen for JavaScript or CSS, but it means minifier has found somethingContinue reading “Minification Failed. Returning Unminified Contents.”
The CSS Sibling Selector
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”
Get Elements Grouped By a CSS Value
The following script allows you to group all elements on a web page by a particular CSS value. So for example, if you specify ‘fontFamily’, you’ll get a list of font families used on the website, and a list of all elements using each one. You can specify other attributes if you would like toContinue reading “Get Elements Grouped By a CSS Value”
Generate Multiple Themes From the Same LESS File
So you have a CSS theme written using LESS. A simple example would be like the example below… you’ve extracted your variables into a file named “variables.less” and you use an import to make those variables available to your main stylesheet. If you decide to change something important, you can do that in the variablesContinue reading “Generate Multiple Themes From the Same LESS File”
HTML and CSS Full Screen Layout Without Fuss
This is a quick guide to the modern method of getting a 100% high chunk of content without a lot of fuss. This technique also works for creating a 100% chunk of content, with more content being appended after the fold. We’ll use this dummy HTML for the purposes of the example – it worksContinue reading “HTML and CSS Full Screen Layout Without Fuss”