Today I am going to give you two simple ways of creating IE Conditional Comments in WordPress. I don’t know about you but I can’t wait for IE8 and below to die! It makes a developer’s job way more difficult than it needs to be. The reality though is that we have to support these later versions until then. There are tons of solutions out on the web but I want to give you guys what I have found to be the easiest for me. If you would like to learn a little bit more about Conditional Comments before you start just head on over to the WordPress Codex and read what they have to say about them.
If you build a responsive theme it is important that you know how to make YouTube embeds responsive in WordPress. There are a lot of solutions out there for this but most of them use a plugin that either makes you enter your videos through a shortcode or wraps all of your Iframes in a responsive wrapper. How about we take a little time to build it into our theme so that we aren’t cluttering our site up with more plugins. It is actually really simply!
So you have built a beautifully responsive WordPress theme that works on all devices. Then you or your client adds a YouTube video into their content…ya know for better SEO…and it shoots out the right side of the screen! Now it looks completely broken. You, as a detail oriented web developer, want to make sure that any YouTube video will be responsive inside your theme. But you also know the importance of keeping your site as lightweight as possible so we don’t want to just go add ANOTHER plugin.
In my last two articles I focused on How to use JQuery with WordPress and how to Use the Dollar Sign in WordPress instead of jQuery. These articles gave you jQuery techniques to use with WordPress. Today I am going to show you a super simple, super helpful tool to accomplish some really fancy css3 hover transitions in the websites you build. You won’t believe how simple it is to implement and use!
How To Use CSS3 Hover Transitions
Front-end developer Ian Lunn created a simple css library called hover.css. This file, when either linked to your site in the header or copied into your existing style sheet, automatically gives you the ability to add over 30 different transitions to use on elements in your websites. Once you have the css3 hover transitions linked, choose whichever animation you like best and remember it’s name. Next you add that class name to the element you want to apply it to. In addition, you must always apply the standard “button” class to make the transitions work correctly. Here is an example of the code and how it looks: