---
title: "My favorite CSS hacks"
url: "https://alex.zappa.dev/blog/my-favorite-css-hacks/"
description: "Discover CSS hacks and shortcuts, including using box-sizing, selection pseudo-class, caret color for input elements, displaying links when an element has no text value, fitting images to content, detecting dark system mode, hiding images on mobile, using CSS vendor prefixes for different browsers, and utilizing Autoprefixer. Learn these tips and improve your CSS coding skills."
---

# My favorite CSS hacks

November 29, 2021

*   [#featured](/tags/featured/),
*   [#css](/tags/css/),
*   [#css3](/tags/css3/),
*   [#hacks](/tags/hacks/)

As it is with every coding language, there are several shortcuts or hacks with CSS that allow you to write cleaner code, improve design elements, and save valuable time. Furthermore, you can directly insert these snippets to your site using a code editor. And here is my favorite CSS Hacks.

## Inherit box sizing

The border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height.

```
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
```

Your browser does not support the video tag.

[MDN CSS Demo – box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

## Selection pseudo class

Use selection pseudo-class to give a personal touch to text selection on your websites.

## Input Caret Color

Set the color of the cursor in input elements.

```
input, textarea {
	caret-color: #ff0000;
}
```

## No value, No problem

Display links when the element has no text value, but the attribute has a link.

```
a[href^="http"]:empty::before {
    content: attr(href);
}
```

## Fit images to the content

In this simple hack, you can make sure that your images always fit the visitor’s screen, regardless of the device they’re using. More use cases could be found [here](/blog/mobile-friendly-responsive-images-with-css/).

```
img {
    max-width: 100%;
    height: auto;
}
```

## Detect dark system mode

[When you want a style that applies to users with dark mode turned on](/blog/detect-dark-or-light-system-mode/), add your style inside media query below. If we want the black background and white text for dark mode users, we will type something like this:

```
@media (prefers-color-scheme: dark) {
    body {
        background-color: #111111;
        color: #FFFFFF;
    }
}
```

## Hide images on mobile

Sometimes we have icons or images that we just don’t want to be seen on the mobile view.

```
@media only on screen and (max-width: 767px) {
	section .user-img {
		display: none;
	}
}
```

## CSS vendor prefixes by browsers

CSS vendor prefixes, also sometimes known as or CSS browser prefixes, are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers. This may be done during a sort of testing and experimentation period where the browser manufacturer is determining exactly how these new CSS features will be implemented.

The CSS browser prefixes that you can use (each of which is specific to a different browser) are:

*   Android: `-webkit-`
*   Chrome: `-webkit-`
*   Safari: `-webkit-`
*   iOS: `-webkit-`
*   Firefox: `-moz-`
*   Internet Explorer: `-ms-`
*   Opera: `-o-`

### Autoprefixer

> The Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. It can help you get prefixes for: animations, transition, transform, grid, flex, flexbox and others.
> 
> [https://autoprefixer.github.io/](https://autoprefixer.github.io/)

To make sure your CSS works well on the rest of browsers, always use Autoprefixer, here ho is it looks like:

![Autoprefixer CSS online](/_astro/autoprefixer-css-online.BnoIHyNR_Z2cs5e3.webp)

## Conclusion

There are countless tricks we can use with CSS3. These hacks have saved me hours of work and made my stylesheets cleaner — I hope they do the same for you.

May the 4th be with you,  
Alex

*   [PreviousDetect dark or light system mode](/blog/detect-dark-or-light-system-mode/)
*   [Next How to change App Store preferred Language 2022](/blog/how-to-change-app-store-preferred-language-2022/)