CSS Colour Quick Tip
June 18th, 2009 — 1 Comment
Using commenting in code is a good way to describe sections of code or giving a visual structure, helping anyone else who sees or has to edit the code. I find that a good way to use commenting is to include a list of all colours used in the CSS at the top of the CSS file. This, combined with a short description of what the colour is and where it is used on the site, is a good way of not only helping others edit a file but also helps yourself during the CSS development stages.
/* ------------------------------------------------------
Colours:
#555 - grey (used on text)
#33281E - very dark grey (used for block headers)
#A64A23 - brown
#9C9A69 - green (used exclusively on the Beneficiation page)
#ECE2DE - light grey (used for third level navigation)
------------------------------------------------------- */
It can be a frustrating experience to edit someone else’s code as everyone does things differently so something as simple as helpful comments will go a long way to reducing that frustrating down the road.
Read more...Rounded Corners on Input Fields in (almost) all Modern Browsers
June 11th, 2009 — 7 Comments
Rounded corners in web design is a popular, modern technique. In general, it can give a site a smoother look and feel to the design but the only way to get it working in all browsers is through the use of images. If you apply the method of progressive enhancement then you can use CSS3 techniques to add rounded corners to web elements without the need for images.
It is common knowledge that this can be done on divs but many designers and developers probably don’t think of using it on input fields. Well, you can! By using the code below you can let the browser do the work while cutting down on the amount of data that the user downloads and also reducing the number of HTTP requests which improves performance.
Read more...Enable Safari's Awesome Built-in Development Tools
June 9th, 2009 — 11 Comments
Almost all web developers know about Firebug, a plugin for Firefox that makes web development so much easier, at least for developing in Firefox. Not everyone knows that Safari has its own development tools built right in.
Available on both the Windows and Mac versions of Safari (preferences > advanced) is a tick box ‘Show Develop menu in menu bar’ which enables the development tools. Â By default it is unticked but enabling it allows you to right-click on any element on a web page and select Inspect Element and bring up the Web Inspector much like you can do with the Firebug plugin for Firefox.
