Developing a new celebrity magazine website with Bootstrap and less, has been relatively painless and fast paced thanks to the responsive grid and JavaScript library (I love the modals). However viewing a prelive site in IE8 in the early stages of htmling can always be a bit depressing. Here are a few things I noticed working with less and IE8.
1) IE8 heavily caches less files
Using the js less production method made it easy for us to find the relevant .less code, in a jungle of interlinking Bootstrap less files. Although making regular less files changes made it difficult to test progress in Internet Explorer 8.
IE8 heavily caches less files, so even frantic bashing of Ctrl + F5 doesn’t seem to have an effect. This is probably only an issue in production when using js to call in the files, but unfortunately when you need to debug it most.
To clear your cache in Internet Explorer 8 go to;
Tools> Internet Options> Browsing History> Delete> Delete Temp Internet Files, Cookies, History
2) IE8 doesn’t understand media queries
When building a responsive site, styles for the default desktop view (if you choose that as the fallback) must be available for IE in the main core or global css. Putting desktop layout styles in the responsive css/less files will mean that IE can’t find them. You could duplicate your responsive styles and call them again only for older IEs, but I found this led to much more unnecessary code.
So depending on if you’re designing mobile first, or wish to show legacy browsers the desktop view, your core styles should be available without conditional media queries.
For an idea of the sites we’re able to create using Bootstrap & LESS, take a look at WordPress websites; Kerrang! or MOJO.
