QuickTip: Make HTML5 elements work in older Internet Explorers

While we are talking about older versions of Internet Explorer, there is a small Javascript called html5shiv.js which enables the use of HTML5 elements like <article> or <section> in IE6-9. You can download it here from GitHub: https://github.com/aFarkas/html5shiv.

Include the script in the head of your page, so IE knows the new elements before rendering them. You should do that with Conditional Comments to make sure that the file is only loaded for the browsers that need it, in this case IE9 and below.

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>

IE7+8 friendly nth-child(x)

Honestly, it has been a while since I had to think about IE7 or even IE8. Their usage dropped substantially over the past years and months. Sure, for certain audiences they are still a big topic, but luckily in the projects I worked on in the past I could happily ignore those and just was able to just focuse on IE9 and newer. What a nice new world.

But as it turns out in the current project I’m working on we have to at least somehow consider IE7 and IE8 and make things work okay. A page doesn’t need to look the same in every browser, I hope we all have understood that by now, but the site should be usable and the key content should be consumable by your target audience.

Read Article …

Colored ul and ol list style items

Have you ever tried to set a different color for ul and ol list style items in contrast to the list item text? Sadly there’s no such thing as list-style-color.

Luckily there’s a really easy way around that. If you set the color of the li the text as well as the list item will be affected. You use that definition to color the list style items and then wrap the text inside the li in another element and set the color of that one, too.

Read Article …

The CSS at…

Chris Coyier:

There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a list of them here, since that’s perfect fodder for CSS-Tricks. I ended up slapping it into a table with a few bits of data that are easy to compare, just for fun.

Speaking of the Sass Architecture at Evernote, Chris Coyier recently put together a table with a bunch of Companies which shared their approaches over the past months.

How Evernote handles their Sass Architecture

Ryan Burgess:

In order best organize all these modules we’ve created four main directories where these files can live. Using the directories: base, layout, modules, and themes helps organize our files in a project and compile CSS into a clean, logical file.

Another post about the Front End Architecture, in this case Sass specifically, of a certain service/product. I really enjoy those posts.

Jekyll 3.0 Release Gameplan

Parker Moore:

I’d like to get Jekyll 3.0 out the door in Q1 2015 to bring all the amazingness we have been cooking out to you excellent Jekyll users and developers. […] Anything else you’d like to see?

Even though I don’t have any site running Jekyll, I’m a big fan. Version 3.0 is right around the corner and now is the time for you to make your wishes for the coming update.

Windows 10’s new browser will have the most advanced features ever

The Verge:

Microsoft is planning to radically overhaul its web browser in Windows 10. Sources familiar with the company’s Windows plans tell The Verge that the new browser, codenamed Spartan, will include a host of new features not found in rival browsers.

What we know so far about the new Browser, codenamed Spartan, sounds really promising. I’m really excited about how Microsoft is developing itself lately.

Introducing: gif.martinwolf.org

Being a freelancer and doing a lot of serious work for clients had me wondering where the fun in just developing simple, little and maybe stupid things has gone.

So last weekend I sat down in the living room in a comfy chair and just started to build this collection of gifs which had been sitting in a folder for quite a while. This simple one-pager automatically loads all the gifs from a folder and shows them in grid with the according url. I used opportunity and learned a few simple things about PHP and tried laying out a grid with Flexbox.

Read Article …

New animation controls in Chrome Canary

Val Head:

The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools.

That’s another awesome addition to the Chrome DevTools. Especially debugging CSS animations can, or I should say could be quite hard. Make sure to check out Val’s screencast demonstrating the feature.

Speaker interview: Andy Hume

jQueryUK/Andy Hume:

What piece of advice do you wish you’d received when you first started out in development?

Don’t concentrate too much on specialising, and don’t pigeon hole yourself. People are too quick to specialise in front-end or back-end, whereas the reality is a large part of our skill is just being an experienced and talented developer.

A nice, short, on-point interview with Andy Hume from the Twitter engineering team.