A few HTML 5 and CSS 3 tips I wish I knew 72 hours ago.

I’ve been wanting to get back to developing websites, and hence wanted to start getting some design and modern front-end development experience under the belt.  I haven’t done serious front-end work for a while, so I took on a small project for a friend – a place-holder website to have up for his future clients (SL-Capital.com).

I decided to go with a somewhat responsive design, with CSS-driven blur effects, font scaling, etc.  But as I started really testing the site with various devices, browsers, etc., I very quickly came across some weaknesses in my skill set.  Here are some tips and tricks that I learned while making this very small and simple page a little more compatible with the real world:

  • Firefox still can’t do CSS blur, etc. – I had to create an SVG file and point the css to the file in order to get the blur working in Firefox.  And Firefox still renders blur pretty ugly… not much you can do about that.  Here is the code I used to get the blur going in Firefox:Create a file called ‘filter.svg’, place in same directory as your .css stylesheet file (or wherever you keep your css that you want to render the blur with).  Contents of filter.svg:
    <?xml version="1.0" standalone="no"?>
    <svg width="1" height="1" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
     <filter id="blur">
     <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
     </filter>
     </defs>
    </svg>

    Here is the CSS to reference the above SVG:

    #yourDiv{
    ...
    filter: url(filter.svg#blur);
    }

    Don’t forget to make sure your web server/web host is configured to serve up the SVG file to browser clients.  Apache users probably won’t need this, but you’ll need a MIME type enabled for IIS (for example):

    Extension: .SVG
    MIME Type: image/svg+xml

  • IE10 (Internet Explorer 10) no longer supports any kind of filtering (at least until CSS3 is officially ratified).  BUT, if you force IE10 into ‘compatibility mode’ for IE9, you can do filtering via the old DirectX CSS tags.  To have your website force IE10 to support blur, add this tag RIGHT AFTER your <head> tag in your HTML file where you will be using the blur (if it isn’t the first META tag after <head>, it won’t work):
    <meta http-equiv="X-UA-Compatible" content="IE=9" />

    And here is the CSS for getting IE10 (IE9) to render the blur:

    #yourDiv{
    ...
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
    }
  • For Chrome and Safari (both webkit-based browsers) it couldn’t be easier:
    #yourDiv{
    ...
    -webkit-filter: blur(5px);
    }
  • As a final tip, I’d like to point out that Media Queries are your friend.  They act as giant IF-statements that help activate (or deactivate) portions of code that meet or don’t meet the criteria specified in the media query.  For example, if you want a specfic section of CSS to be active when the browser window (or mobile/tablet device) is in a landscape orientation (width > height):
    @media all and (orientation:landscape){
    ...
    css here
    ...
    }

    The media query ensures that the encompassed section of CSS (the CSS code between the {}) is only active if it meets the criteria you specify.  This is very helpful for switching between different sections of a single CSS sheet, without having to resort to Javascript dom hacking, linking to multiple stylesheets, etc.  It is especially helpful in responsive design, because you can often switch the sizing and layout of your text depending on the width of the client window, orientation, etc.  For example, adding some extra criteria for screen height:

    @media all and (orientation:landscape) and (min-height:875px){
    ...
    }

    This will trigger the encompassed CSS to only be active when the window/device is in a landscape orientation, with the height of the window being a minimum of 875 pixels high.  When using media queries to direct your active div positioning, sizes, orientation, and even font sizes (for example, switching between vh and vw viewport units), they really become the ultimate responsive design tool.

That about does it for this post.  I hope this helps you out in your CSS3/HTML5 quest for glory.

Advertisements

One thought on “A few HTML 5 and CSS 3 tips I wish I knew 72 hours ago.

  1. This excellent website really has all of the information and facts I
    needed about this subject and didn’t know who to ask.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s