5 tips that will speed up your CSS tweaking and save you hours
Get your designs pixel perfect by inspecting and alternating your CSS in realtime with Chrome DevTools
If you are like me, you sometimes have to spend time tinkering with your CSS to get everything right. And, depending on the project your are working on, you do not necessarily always have all the latest frontend tools available (particularly if you are tasked with updating a legacy code base).
Regardless of your project setup, these five tips will allow you to get instant feedback on your CSS implementation ideas before putting them into code. By leveraging some features available in Chrome DevTools, you can assess your ideas straight in the browser!
Below are five features I tend to use almost everyday when developing rich web interfaces, and I thought I would share them with you.
If you have not used the Chrome DevTools before, now is the time! Also, if you are not using Chrome, similar DevTools exist in almost all browser (including IE).
To quickly fire up Chrome DevTools use Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
OK, are you ready? Here are the tips to tweak your CSS in no time, drum rolls please…
# 1. Use up/down arrow keys to fine tune pixel values
Ever found your self in a situation where you need to align an element down to the pixel, but do not know the exact value it should have? Here is a quick and easy way to fine tune the values, pixel by pixel. Simply click into the value you want to adjust and use the up/down arrow keys to either increment or decrement the value bye one.
Need larger increments? Hold down the Command key for 100px steps (Ctrl key on Windows). What about smaller? Hold the Option key for 0.1 pixel steps (Alt key on Windows). And as my colleague Martin pointed out, hold down Shift to get 10 steps increments; you always learn something new! =)
Similar arrow key adjustments works for all numeric values, not just pixels!
# 2. Hover the DOM-element you are adjusting and get automatic bounding box highlight
While using arrow keys to adjust element styles (for example position, width or height) is great. Sometimes it is still tricky to see if elements line up, particularly when working with transparent elements such as images or padded items.
By hovering the DOM element you are adjusting you get automatic bounding box highlight straight in your page, and you can watch the element grow/shrink/move as you adjust the value with your arrow keys!
# 3. Force element state using the “Element panel”
Ever needed to adjust and temper with a particular button state such as hover, active, focused, etc.? Forcing and locking an element state is as effortless as toggling it from the Element panel, simply click the boxes for the states you desire; don’t forget to select your element in the DOM first.
# 4. Add inline styling using the element.style container
It is not always that you have a CSS class readily available whenever you need to adjust the styling of a particular element, and editing inline styles straight into the DOM is generally quite cumbersome. Instead, use the element.style container to easily add inline styling!
# 5. Analyse responsive layouts using the “Device Toolbar”
Today all web sites need to be responsive, usually developed with a mobile first approach. Getting the styling correct for all different screen sizes can be painful if you don’t have a good process for it.
You probably already use the Device Toolbar to analyse your responsive layouts using the predefined device screen sizes, but did you know that you can also add your own custom “device” i.e. size? Simply add your own breakpoints using the Add custom device option in the menu.
This is a clever thing I tend to use whenever I am working with projects that have breakpoints that do not align with any of the predefined devices; this allows me to quickly verify my styling related to the project breakpoints.
I hope you enjoyed reading this, and that you found some of the tips useful! Regardless, let me know what you think by pinging me on Twitter (@Stjaertfena), reach out on LinkedIn, or drop me a comment here on Medium. Need help with your projects, checkout my company flatwave.se!
Want to stay updated whenever I publish something new? Follow me on Twitter and never miss a thing! Thanks for reading, and keep improving your development processes to get all your designs pixel perfect! =)
