Tips and Tricks
Developer Tools: The Key to Speedy CSS
Ask any front-end developer. In-browser developer tools are the key to speedy development and debugging. Additionally, they’re useful for HTML, Javascript, and many other languages. I’ll focus on the CSS benefits today.
With the right dev tools, you can modify CSS and preview your changes in real-time before you commit them to your CSS file. This shaves time off of swapping applications, uploading, and refreshing. Finally, no more stabbing around in the dark to figure out what will fix your issue! They also allow for pixel-perfect absolute positioning, as you can see exactly where you are moving an element.
Browser Basics
Throughout my time developing, I’ve found that Chrome and Safari are consistently the most accurate for cross-browser compatibility. Across operating systems, Chrome is probably the most popular because Google knows what they are doing.
If you are using Firefox, upgrade to Chrome.
If you’re using Internet Explorer, have you considered that you’re maybe not ready for web development? I joke, but seriously, you need to use a better browser. Later versions have been more W3-compliant, but it’s a tool best saved for compatibility testing.
Consequently, using the right browser can save you a ton of time in your cross-browser testing. A bad browser will leave you struggling to get your code to play nice. Your page will not render correctly in standards-compliant browsers and it’ll increase load time.
Dive in with Developer Tools
Chrome DevTools
To setup DevTools in Chrome, check out the DevTool docs.
If you’ve never done CSS troubleshooting in-browser, Google has set up a great article detailing how to use Chrome DevTools to inspect and edit your pages and styles.
Most importantly, Device Mode is BAE. It’s Chrome’s emulator for mobile and tablet devices. It is always best to compatibility test on an actual device, but Device Mode is a great supplement to standard QC.
Safari Web Inspector
To setup Web Inspector in Safari or iOS, check out the Safari Web Inspector Guide. This article also contains information to help familiarize yourself with the interface.
The main benefit to using Web Inspector is the ability to inspect and adjust elements on an actual iOS device connected to your computer. Sometimes device emulators don’t always show the same issues visible on the actual device. Web Inspector on iOS Safari makes resolving issues on Apple devices easier.
Tips for Speedy CSS with Developer Tools
- Double-click on any code in the elements or styles panel to update HTML or CSS.
- If a style isn’t adjusting through your tools, try applying it to the element’s HTML parent.
- A scroll through the styles panel will show you other CSS impacting an element, in case something is overwriting your change.
- Hover over an HTML element with the inspector cursor or in the code panel. It’ll highlight the element and tell you the size.
- Psuedo-classes (like
:hover) can be toggled on and off through the styles panel, so you can easily style your links and menus. - Impress your friends by sending them screenshots of wacky celebrity tweets that you’ve changed the HTML text on. (Don’t believe everything you see on the internet, kids.)
In conclusion, developer tools are your most important asset for speedy front-end dev. You make the most of your CSS code when you use these tools and do so quickly. If you are trying to learn front-end and don’t use them, you’re just going to give yourself a migraine.
I feel like dev tools are paramount, but you tell me: are there any other CSS tools you can’t live without? Empty your toolbox in the comments below.