Conditional styles for IE10

As you probably know Internet Explorer 10 doesn’t support the good-old IE CSS conditional comments. This means that the below code won’t work in IE10!

<!-- Not working :-( -->
<!--[if IE 10]>
<link type="text/css" rel="stylesheet" media="all" href="/path/to/ie10.css" />
<![endif]-->Check out this Pen!

But don’t worry, you can still apply CSS styles only to IE10 by using the below syntax. Great tip, that I learned from Chris Coyer’s blog.

html[data-useragent*='MSIE 10.0'] body {
  background:#ccc; /* IE10-only */
}Check out this Pen!

How to style a file input element in Firefox

Working on a recent project I found out the hard way that Firefox doesn’t allow you to style a file input element the way you want. I’m using Chrome for surfing and development, which let’s you style a file input field without any constraints so I was a bit frustrated when I checked my form in Firefox! With a quick search I discovered that Firefox doesn’t let you do too much with the file input element. I also discovered some workarounds, but most of them were too complicated for the simple effect I wanted to achieve (to place a background image in the file input field). With a little help from stackoverflow and no javascript at all, I managed to make it work in Firefox as well as other browsers (see code below).

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

Remove rounded corners from input elements on mobile webkit browsers

Mobile Safari is probably the best browser solution for iOS devices. The browser offers many advanced features and some eye-candy form elements to interact with. These eye-candy form elements already have some default webkit-only styles and can make your life a bit harder if you want to style them differently. Anyway, cutting a long story short, if you don’t want input elements to have rounded corners, just use the CSS rule shown below:

See the Pen Remove rounded corners from input elements on mobile webkit browsers by John Tsevdos (@tsevdos) on CodePen

How to style placeholder text

The placeholder attribute is one of the most useful HTML5 attributes, because with just a tiny attribute you provide a better user experience to the end user, you make your code more semantic and all of this is achieved without writing a single line of javascript. But this super easy and time saving attribute is a bit difficult to style. The typical input styles don’t apply to our placeholder! No worries though, in webkit-based and gecko-based browsers you can apply the below rules and style your placeholders.

See the Pen How to style placeholder text by John Tsevdos (@tsevdos) on CodePen

Note 1: Don’t try to combine the selectors because it won’t work! If a browser doesn’t understand a selector it invalids all the following rules and this will always be true in our case, since webkit-based browsers won’t understand the :-moz-placeholder selector while the gecko-based brosers won’t understand the ::-webkit-input-placeholder!

See the Pen How to style placeholder text by John Tsevdos (@tsevdos) on CodePen

Note 2: For some reason the placeholder attribute inherits all the input stytles (ex. color, background etc.) in gecko-based browsers (tested in Firefox 14). If you encounter this problem just make your selector more specific.

See the Pen JviFh by John Tsevdos (@tsevdos) on CodePen

Conditional CSS for Firefox/Gecko browsers

Last year I posted how to add conditional comments for webkit-based browsers. This time I found a really cool hack on how to do the very same thing for Firefox/Gecko-based browsers (from Chris Coyier). The solution is again very simple and it’s based on a media query that only Firefox/Gecko-based browsers will parse.

See the Pen Conditional CSS for Firefox/Gecko browsers by John Tsevdos (@tsevdos) on CodePen

Responsive media (images and videos) using only CSS

There’s no reason to explain everything from scratch, there are plenty of posts on this topic, but if you are building a responsive layout, don’t forget to apply these media rules to your CSS file.

See the Pen Responsive media (images and videos) using only CSS by John Tsevdos (@tsevdos) on CodePen

With the above styling rules we ensure that all of our media files (images and videos) are ready for responsive layouts. The first two rules are very easy to understand and probably the safest and simplest way to publish media online (since we are talking about pure HTML5 elements). The final two rules are for embedded media (objects, embeds and iframes), that we simply wrap into a container/wrapper element (with a class of video). I first read of this technique on a post entitled “CSS: Elastic Videos” and personally I believe that it’s the best solution for responsive video embeds. I’m usually against Javascript solutions/alternatives, like for example FitVids.JS, since it’s a pure presentational (CSS) issue and not a functional (Javascript) one.

So if you’re building a responsive layout, try treating your media with the pure CSS approach. It’s the fastest, simplest and cleanest way to achieve responsive media

Safari’s HTML5 search input

The safest and easiest way to upgrade your markup to HTML5 is to use the new form input types. They will appear as ordinary text inputs on older browsers, and at the same time they’ll save you tons of work on form validation, and as a bonus they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). This blog theme uses a search input to search the site.

<input id="s" name="s" type="search" />Check out this Pen!

It works great, but unfortunately, Safari’s default search input generates a close button (x) into the input field (while you type). Supposedly this will help the users to view recent search keywords, but if they they decide that they don’t need help, they can just click it and remove everything from list and the input field. I didn’t need this in-browser style for my search input, so after an investigation, I discovered the below solution.

input[type="search"] {
  -webkit-appearance: textfield;
}Check out this Pen!

This rule will transform your search input (with the strange close button) into a typical text field input that you can style properly.

Conditional CSS for Webkit-based browsers

Edit: Please keep in mind that the below code works also on MS Edge. You can re-write MS Edge specific CSS using @supports (-ms-accelerator:true) {} (read more on the comment section).

On a recent project I had to find a way to apply CSS only on webkit-based browsers. We are all, more or less, very familiar with IE’s conditional comments, but what about other browsers? For webkit-based browsers, the solution is fairly simple. We only need to add our CSS statements into a “special” media query, that only webkit-based browsers will parse :

@media screen and (-webkit-min-device-pixel-ratio:0) {  
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */  
  body { background:#ccc; }  
}Check out this Pen!

Nice ‘n easy 😉

A really simple HTML5 template

Lately I’m using more and more HTML5 elements on my markup. It’s the right thing to do after all, especially on smaller, flexible projects. But as a typical developer I’m too lazy to type everything from scratch, that’s why I’m using more and more the HTML5 Boilerplate from Paul Irish. It’s great but I catch myself deleting many files and lines of code every time, in order to make Boilerplate fulfil my requirements. After all, in most cases I don’t really need things like YUI Profiler, Google Analytics, favicons/iPhone icons and many others for a quick prototype. What I really need, is a very simple template with less features, scripts, and tools! Below you can see/use my HTML5 Boilerplate

Markup :

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8" />  
<title>Really simple HTML5 template</title>  
  
<link rel="stylesheet" type="text/css" href="style.css" />  
  
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
</head>  
<body>  
    <h1>HTML5 Template</h1>  
</body>  
</html>Check out this Pen!

A single stylesheet and just one script, will do the work just fine. (The html5shiv helps older IE browsers, to style the new HTML5 elements).

CSS :

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}Check out this Pen!

For CSS, I’m just using the normalize.css.

That’s it, our super minimal HTML5 template is ready for use! Just copy, paste and enjoy…

CSS3 PIE : My new favorite IE enhancement

IE sucks big time, period! Even version 8 doesn’t support many useful CSS rules such as border radius and box shadow, both standard things for 2010. For those who already use all the nice CSS3 features that IE doesn’t support, try CSS3 PIE. The installation is easy (you only need to upload one file and that’s it) and after that, you’ll finally force IE to support many CSS3 features such as border-radius, box-shadow, border-image, multiple background images, linear backgrounds, rgba as well as some other features. Give it a try, it’s not bad at all (plus you keep all the behavior inside your CSS file, you don’t need to write/code/attach any Javascript code).