5 CSS tools that will facilitate your web developer work

Let’s face it, most of us are in a love/hate relationship with CSS. While you can achieve an amazing appearance with it, dealing with malfunctioning visuals, cross-browser compatibility and the syntax of features you may almost never use can all be frustrating parts of the process of developing your project.

Hoping to somewhat help my fellow developers, here are 5 CSS tools that will facilitate your web developer work:

1 — Debug CSS Chrome Extension — https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj

One of the tools I use the most. Install this Chrome Extension and with one click you can see the outline of all elements on the screen. This is especially great when you need to see how each element is placed on the screen, what is inside what, which elements are overflowing or causing weird spacing, among many other uses.

A plus is that you can hold the “control” key and hover an element and see some of its properties!

Debug CSS Chrome Extension being used in caniuse
A website with the Debug CSS Chrome extension showing the outline of all elements, and at the bottom, its hover feature

2 — caniuse — Checking for browser compatibility — https://caniuse.com/

Probably the most famous on this list, caniuse is a great website that lets you check browser compatibility across a range of CSS properties.

Not sure if Internet Explorer 11 will handle that fancy CSS feature (very likely, it does not even handle grid properly…)? Check here in seconds (and maybe conclude that supporting IE might not be worthy for this project anyway…)

Website caniuse showing results
Browser compatibility for the backface-visibility being shown in caniuse

3 — shouldiprefix — Knowing when to add CSS prefixes — http://shouldiprefix.com/

Website shouldiprefix
Overview of the website shouldiprefix

So, you came to the conclusion that you are going forward with that fancy CSS feature but freaking Safari or Firefox are not working in the same way as Chrome and Edge? This could be a prefix issue, so shouldiprefix will tell you whether to add it and which prefixes, and maybe along the way you will get to know some of the fanciest CSS features added in recent years (did you know it is possible to cover part of an element with a “mask” property? I might have to try that now…).

Beware, it was last updated last year, so it should mostly be an indicator of whether you should try prefixing that feature.

4 — CSS Gradient Gradient Generator— https://cssgradient.io/

Gradients can be amazing ways to change the appearance of elements (though designers seem to consider them cool and then uncool every 2 years), but it might not be clear which direction, colors and amount of each color will best fit the gradient in your project? This is the tool that will easily let you try out different combinations and give you the full CSS code, speeding up the whole process (and if you are like me and does not always understand aesthetics well, it may also reduce your pain).

Gradient generator
Gradient generator in action
Code provided by the gradient generator
Final code provided by the website

5 — Clippy — Clip-path generator — https://bennettfeely.com/clippy/

Clip-path is one of these CSS features that have great looking results (beware the low browser compatibility) but you probably will have not many use cases depending on what you mainly work on, so writing the path values you desire might not be something you can instantly do without a few tries. This is the tool that will speed up the process for you, letting you try different shapes (presets or custom) and it will give you the whole code back (precious minutes experimenting might be saved here).

Clip-path tool clipping an image in the shape of a star
Clip-path tool using the “star path” already built-in

The world of CSS has a lot more to it and many hidden features. In coming articles, I hope to bring more content that can hopefully make our daily work easier! Stay tuned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sieger Media

Sieger Media

Programmer with a previous background in business, Geek, sometimes a musician, and a fan of Square Enix, Nintendo and Japan. I also share some neat geeky stuff.