Introducing CSS Modal

CSS Modals in action

In the last couple of months I’ve worked on several projects that needed an overlay with some content on it. Some front-end frameworks as for example Bootstrap refer to them as modals.
You can find a lot of implementations that do exactly what I search for but they all have one major drawback: They rely on JavaScript.

Yes, sure, everyone has JavaScript enabled these days but why use a technique that you don’t necessarily need for a given problem? Also most implementations have drawbacks when it comes to mobile devices and responsive web design in general or accessibility. Apart from that they add a lot of code, that is not necessary for a lot of pages. Others might add dependencies such as for example jQuery which you don’t need at all on your micro-site.

To tackle these problems I decided to write my own implementation of a modal that fulfills what I need.

Modals built out of pure CSS

CSS Modal is the result of this experiment.

Here is what is cool about it:

  • CSS Modal is built out of pure CSS while JavaScript is only for some sugar.
  • The modals are designed using responsive web design methods.
  • It is accessible, cross-browser, media-adaptive, small and fast!

Another cool thing is that you can use CSS Modal as Sass plugin and apply it to your custom classes using Sass placeholders.

Visit the website     View an example

Check out the website to get documentation and more examples. The project is on GitHub so if you use it and find bugs, please report them.

General feedback is also very welcome. Please tweet me!

The REM Fallback with Sass or LESS

Since a while now word has spread to use the CSS unit rem for font-sizes and values in CSS. Here I want to explain how you can use a fallback in Sass or LESS to get rem working in all browsers.

View Gist with mixins

Why rem?

Let’s look into what rem means. We know of the em unit which is relative to the font-size of the parent element it is defined on. This means if one of the parents in the DOM-tree changes its font-size, the font-size of the child element changes too. In contrast the rem unit is relative to the root element of the page (this means the html element). Thus it is possible to define a font-size once on the root and make all other sizes depending on this size. Please switch over to Snook’s blogpost explaining what rem is to get more information about it.

If you ask yourself why you should use em instead of px, Chris Coyier wrote an article on why he switched to em instead of pixels a while ago for nearly all properties using units in CSS. Read this to understand why em and thus rem is so important.

I would encourage you to use rem (or at least em) for properties like padding, margin and sometimes even width instead of pixels. It makes your design even more responsive.

The drawback of rem is that it is not supported in all browsers that are used, even though the support looks pretty good: Internet Explorer is capable of dealing with rem since version 9. The versions before need a fallback. It is supported on the major mobile browsers except Opera Mini. Let us have a look on how we can define such a fallback using Sass or LESS.

A Sass Mixin

In order to get the pixel-based auto-calculation working as a fallback we need to define the font-size as a variable in Sass or LESS.
The following examples are in Sass with the SCSS-syntax.

$main-font-size: 16px;

We can now use this default font size on the root element:

html {
  font-size: $main-font-size;

Now we define a mixin that provides a fallback pixel-based size of the property based on the variable we defined before and in rem for capable browsers.

@mixin x-rem ($property, $value) {
  #{$property}: $value * $main-font-size;
  #{$property}: #{$value}rem;
}

What the mixin does is, that it takes the $property and calculates the value in pixels. This simple mathematic function is part of Sass. The $value argument is a decimal digit.

I like to prefix my own mixins with x- to easily distinguish them from other mixins. This is a part of the Idiomatic CSS principles by Nicolas too. I think previously I prefixed them with a namespace (mostly it was the- as a prefix, so you get the-transition) – but since there is a better convention with Idiomatic CSS I switched to it.

This mixin can be called like in the following examples:

@include x-rem(font-size, 1.4);
@include x-rem(padding-left, 2);

The output that is being produced looks like this for the first example:

font-size: 22.4px;
font-size: 1.4rem;

You can use Sass’ round() function to get an integer output for the px-based output. But every browser is capable to round 22.4px by itself to 22px since it is not possible to display 0.4px after all. (LESS has the same function.)

A Few Words On The LESS Mixin

In LESS interpolation for properties is current not possible with version 1.3.x. The maintainers aim to include it in version 1.4. For the time being we need to define a workaround for properties which is basically a JavaScript function which returns a sting that consists of two properties instead of one, while the first one is - which is basically no property an thus disregarded by the browser. The second is the property that we want to use.

Here is the first line of the mixin:

-: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;

This only works if the LESS compiler uses the actual JS library. It does not work with lessphp or other compilers that are not JavaScript based.

Final Words

And that is it. The mixin provides a decent fallback for rem-based sizes of all kind. Since CSS runs stable with this version of a fallback and overwrites the pixel-based value because of CSS’ cascade we can use it without any problems. It works in old Internet Explorers.

Life is easy with rem. So look at the Gist and use the rem-fallback-mixins.

Sass and LESS mixins

Credit

I want to mention that I first saw this technique used by Divya Manian a year ago (beginning of 2012) when working on the HTML5 Please API project. I am not sure who developed this technique or where it comes from. Please let me know if you have a link.

Addition: The Susy framework has a Sass mixin which lets you easily convert units including the rem unit and a fallback as described here. (Head-tip Fabian Beiner.)

Addition 2: Steffen wrote a Sass mixin which lets you use the short notation of properties like margin or padding. Even mixing values as px and rem is working. Cheers!

About CSS Variables

Please read about the updated syntax of CSS variables in the first and second update of this post.

Since a little bit more than a month (as of the time of writing) there is a Editor’s Draft for a CSS Variables Module by Google (Tab Atkins and Luke Macpherson) and Daniel Glazman. Just a few days ago the Working Draft was updated.
The first draft was written in 2008 by Daniel Glazman but was not added to the official specification. The new WD extends this proposal by Glazman.

Disclaimer: This article is part of a small series about the latest CSS working drafts. The first article in this series was about the CSS Hierarchies Module.

CSS Variables

The CSS Variables Module Level 1 suggests to use variables for data that is reused in stylesheets. These key-value storages provide the possibility to store “meaningless” data as you can do in HTML: Variable keys consist of a data--prefix and the variable name.

Any property name starting with the prefix “data-” is a data property. Data properties are defined to be valid but meaningless as they are meant solely for allowing authors to pass custom data around their page, similar to the custom data attributes in HTML.
Defining Variables With Data Properties – CSS Variables Editor’s Draft

Using data- as a prefix for variables is still in discussion and may likely be changed to something more “connected” to variables ($ or &).

Edit: The mailing-list www-style is discussing the use of data and Ian Muir wrote an article about the problem.

Syntax

Variables are defined by mapping them to the :root pseudo-class. The WD does not really explain why the variables must be declared on the root-element. Maybe it’s because the data needs to be bound to an element to not “fly around” in the global scope (which does not really exist in CSS).
Defined variables can also be set on every other element and overwrite the existing value of a variable.
So this is how you set variables.

To get a specific variable, you do not declare the variable-name but you call data as a function on a certain property with the variables name (without data--prefix) as an argument.

An Example

So here is an example:

/* Set data */
:root {
  data-main-color: #bada55;
}
 
/* Get data */
.foobar {
  color: data(main-color);
}

As said before, variables can be overwritten for specific elements. So we can add the declaration of the variable to .foobar:

.foobar {
  data-main-color: #fe57a1;
  color: data(main-color);
}

The color of .foobar is now #fes7a1 and not #bada55.

Real World Examples

Well, as this is an Editor’s Draft and pretty new it’s not being implemented in any browser.

I’ve created a test case on dabblet with vendor prefixes which tests the two examples above. I’ve run this test on the major browser alphas and nightlies.

Even though variables are not natively supported by CSS in any browser yet, we can use a very similar approach: All CSS preprocessors support variables. Here is an example with SASS:

/* Setting a variable */
$main-color: #bada55;
 
/* Get the variable's value */
.foobar {
  color: $main-color;
}

Conclusion

We can use variables with preprocessors today which is pretty rad. As with the CSS Hierarchies Module CSS in the future may support ideas that come from implementations in preprocessors somehow.
I think most developers are happy about these adoptions and will likely use it. But as it will take some time for all vendors to implement this feature – and even more time until browsers that don’t support such new features vanish – we will have to use preprocessors to get variables in our CSS working.


Update 19.08.2012

Since I wrote the last update the Editors Draft changed: The var()-function changed to use the var-glyph $ as it is known from SASS (described above).

It is now possible to call variables like this:

h1 {
  color: $some-color
}

While it still needs to be defined with the var prefix:

:root {
  var-some-color: #aaa;
}

As Tab Atkins describes in his blog this is going to change back to the old syntax I wrote about in the first place as this causes problems with further implementations of CSS (like variables for selectors and the hierarchy model).


Update 16.04.2012

Since last week the CSS Variables Module Level 1 is an actual Working Draft of the W3C.

It’s now possible to define variables with the var-prefix instead of data which is still pretty complicated. I wonder why they not adept an existing concept as in LESS or SASS.

Thus the data()-function changed accordingly to var().

Furthermore it’s possible to set variables on a certain element but use them in a more complex definition. An example might be the usage as follows (while elements with class important and primary are divs):

.important { var-color: red; }
.primary { var-color: blue; }
div { color: var(color); }

Also nestings for variables are possible:

:root {
  var-color: #ddd;
  var-border: 1px solid var(color);
}

The bright and shiny future

As I think there still are some issues with this Working Draft I like the fast step forward in making this a WD in only a view weeks.
So sooner or later variables will be part of the CSS specification and will be implemented in browsers. I hope this will be very soon.

About The CSS Hierarchies Module Level 3

Since the beginning of February there were some proposals for the CSS3 specification. These proposals are not yet part of the specification and will likely be changed until they get adopted by the CSSWG. One of these drafts is the CSS Hierarchies Module Level 3.

So what’s the Hierarchies Module? And why “Level 3”?

The Hierarchies Module is not exactly new. It exists since the very first steps of CSS and was first released in Dezember 1996 with CSS1. The CSS1 specification is still up, so check it out if you want to.

When you write CSS you always use selectors to target the element you want to style. This works pretty much straight-forward: The right-most simple selector is the one which get the declarations assigned that are defined in the ruleset.
These selectors define a certain hierarchy in your stylesheet.
Note: Please make sure to read Tab Atkins’ Reference for CSS Spec Terms.

An example

Today you would target some links in a navigation like this:

#nav ul li a { color: #000; }

If you’re smart and your markup allows you to do so, you may write:

#nav a { color: #000; }

The li-elements need to be inlined as you want a horizontal navigation:

#nav ul li { display: inline; }

Furthermore the navigation should be aligned on the right and all the links centered:

#nav ul { text-align: right; }
#nav ul li { text-align: center; }

This leaves us with a lot of repetition for the selectors.

#nav ul { text-align: right; }
#nav ul li { text-align: center; display: inline; }
#nav ul li a { color: #000; }

With the Level 3 proposal by Tab Atkins Jr and Shane Stephens (working for Google) this is about to get a little bit easier. The existing system will be extended with some new functionality. This is why it’s called Level 3. (Also it will likely be part of CSS 3 – and not 4 or 10 or something.)

What’s new in there?

Lately you saw the rise of CSS Preprocessors. Everyone has an opinion on this. The thing why so many developers use them is that they help to organize the CSS-code you are writing.
Preprocessors have brought up another idea of CSS hierarchies. And with the CSS Hierarchies Module Level 3 this has been adopted.

The specification draft allows you to nest your rules and use the &-character to reference a parent selector in a certain rule.

Here’s the example from above with the new hierarchy:

#nav ul {
    text-align: right;
    & li {
        text-align: center;
        display: inline;
        & a { color: #000; }
    }
}

As you can see there are no repetitions for the selectors as you can reference them by just writing & and nest them properly.

How can we use this today and when will it be ready for the “real world”?

As you may guess this is not implemented in any browser yet.

As this spec is written by two Google-guys it’s likely that this will be implemented in Chrome in the near future. At the moment this is not working with Chrome 19 (Canary) or WebKit Nightly.
I’ve made this Dabblet to check if the module is supported in a browser or not. caniuse.com does not provide any data for the Hierarchies Module yet.
Aside: Check my Dabblet Chrome App to view all your latest dabblets if you’re a Chrome user.

Tab Atkins proposed another style for nesting. To reference the parent selector you use @this instead of the &-character. Peter Beverloo wrote about this a year ago. Also Tab Atkins has an article about his further plans. This variant was not implement either and is replaced with the new draft for the specification. Anyway you could view the dabblet I’ve made for this propose.

Preprocessors

As mentioned above CSS preprocessors offer the chance to use something like hierarchies in there own way. Here are two examples:

SCSS (aka. SASS)

#nav ul {
    text-align: right;
    li {
        display: inline;
        a {
            color: #000;
            &:hover { color: gray; }
        }
    }
}

Stylus

#nav ul
    text-align right
    li
        display inline
        a
            color #000
            &:hover
                color grey

As you can see there is a difference in how preprocessors treat the &-character as a reference: In the CSS specification draft & is obligatory in every nested rule you write to reference the parent selector. Preprocessors need them only if there is a pseudo-class or -element or a combinator (such as ~ or >) used for a specific selector.

As I stated in the introduction it may happen that the specification will be changed until it becomes final or is adopted by the CSS Working Group. I recommend you follow the discussions about this topic in order to stay up to date.
When this specification will be implemented by one of the browser vendors it’s just a matter of weeks until it will be adopted by the others I guess.

But, as the draft states, this is not yet part of CSS:

This document is purely an Editor’s Draft. It has not yet been adopted by the Working Group, and should not be considered to be part of CSS.

~ CSS Hierarchies Module – Status

Opinion

Personally I hope that referencing the parent selector with & will not be in the final specification as it is now. It’s not needed as the rules are nested anyway and preprocessors nowadays treat them better.

Anyway the new nesting is pretty useful as it reduces the redundancy of writing selectors in CSS. In connection with other upcoming specifications like the CSS Variables Module Level 1 this is what is needed and will be helpful for every web-developer once it will be implemented in browsers.

Lea Verou’s Animatable

Lea Verou publishes some really great stuff. Her latest work is Animatable. A tool to showcase the variety of things you can do with CSS3 animations. And it’s awesome.

Some weeks ago I had this article about rotating images like I use in the footer of this page. There is an animation in Lea’s demos that makes use of the same properties.

You will find some nice cutting edge CSS3-techniques in the demos so make sure to check out the source-code on GitHub. You can also contribute and check in a pull request if you want to.

Edit: And by the way… Lea writes about her idea :)

Resize Elements with CSS3

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them.

One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows.

There are four values for resize that are kinda logical:

  • none: no resizing at all
  • horizontal: resizing only horizontal
  • vertical: resizing only… vertical
  • both: yeah, well… pretty obvious, right?!

Robert Nyman created this demo using the resize-property. You should also check out Louis’ article that’s pretty great. And: the MDN docs about resize. You can also read more about this topic at Stackoverflow.

CSS3: Rotate Images on Click

With CSS3 be get some great new functions to use that are now accessible pretty easy. These are not only rounded corners or shadows but also transitions and full animations that let you do things that were only possible with JavaScript some time ago.

In the footer of this website I use CSS3 3D-transitions for rotating two images. There is a front- and a back-site for that image. Through animation on click it looks like these images are rotating.
I’m not the first one using this technique. I got inspired by Google+. They are using it for rotation of the profile-picture but in another way with JS.

So… Let’s start this little tutorial. We will be do all the stuff with pure CSS which is a bit tricky and – as you may guess – this will not work with all of the browsers that are in use. But let’s take a look.

HTML

What the HTML will look like:

<div class="animate-wrap">
  <input type="radio" id="ani-1" name="animation" checked="true">
  <input type="radio" id="ani-2" name="animation">
 
  <div class="animate">
    <label for="ani-2" class="front">
      <img src="http://drublic.de/archive/wp-content/uploads/2011/10/rotate-images.jpg" width="220" height="220" alt="A photo of me.">
    </label>
 
    <label for="ani-1" class="back">
      <img src="http://drublic.de/archive/wp-content/uploads/2011/10/rotate-images-2.jpg" width="220" height="220" alt="Another photo of me.">
    </label>
  </div>
</div>

You may wonder why there are those two radio-buttons and labels included in the markup. Well, let me explain this: When you click on a label, the radio-button with the ID defined in the for-attribute will be activated. With CSS we can then define rules relaying on the :checked pseudo-class.

Chris Coyier also used this technique to build CSS-only tabs. In this article you will find some more information about how and why to use radio-buttons for this approach. Chris also wrote down pros and cons, stuff you should consider and so on.

CSS

As I wrote, the idea of flipping images with CSS is not exactly what you would call new. So to get the CSS-part of it you can also visit this nice demo-page and check out the source code on Github.

Mh, now let’s have a look at the CSS. One thing should be pretty obvious: We are using CSS3 for this tutorial, so there are some issues with vendor-prefixes. At the time of writing it will only work in Webkit-browsers as this is the only engine which supports 3D transforms for some time now. As mentioned by Daniel Baron on Twitter today the nightlies of Firefox will support it too. I checked on Firefox 10.0a1 (FF Nightly as of today) and it works like a charm.
Anyway: we will find a way to make it look ok in all of the browsers.

/* Wrapper */
.animate-wrap {
  position: relative;
  width: 220px; height: 220px;
  background-color: #aaa;
  -webkit-perspective: 1000;
     -moz-perspective: 1000;
          perspective: 1000;
}
 
/* Inputs */
.animate-wrap input {
  display: none;
}
.animate-wrap [type="radio"]:checked + .animate {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
 
/* Image-Wrapper */
.animate {
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}
 
/* Labels */
label {
  position: absolute; top: 0; left: 0; z-index: 2;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
 
.back {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.front {
  z-index: 1;
}

Let’s break this down: First of all we have the styles for the wrapper. The important bit here is the perspective-keyword. As the name it self indicates it adds some perspective to the animated items.

Input-fields are hidden. By detecting which input-field is checked we start the animation by adding transform with a value of rotateY(180deg) to the label that is supposed to be animated. This indicates that the element will be rotated around the Y-axis or as the spec describes it

rotateY(<angle>) specifies a clockwise rotation by the given angle about the Y axis.

Another important bit that keeps the animation running like it shout is the transform-style-property which defines that the animation should be performed in a 3D-context via the value preserve-3d.

You will get a nice overview of these attributes named here by reading this article about how to animate a 3D-cube with CSS.

In order to prevent a kind of flashing while the animation takes place I added the backface-visibility property.

JS

We are finished with the CSS3 3D-transforms now. But we want to have some more browser-compatibility I think. Therefore we will add some JavaScript to the code which adds and removes a class front to the image that should be displayed.

if (!Modernizr.csstransforms3d) {
  $('label').click(function() {
    $('.animate .front').removeClass('front');
    $(this).addClass('front');
  });
}

As you can see the JS-snipped uses Modernizr to detect if CSS3 3D-transform are supported or not. If not JavaScript listens to the clicks on label elements and adds a class to the clicked one while removing the “old” one. This snipped is depending on jQuery as I personally use it for like every page I’m doing. But there are ways to do it without any library… You’re smart, you know that.

So… looks like we’re done here. If you have something to change for this little tutorial, please let me know in the comments or via email.

Download the files       Demonstration

Text-Shadow in Internet Explorer

This mothereffin shit is worth a blog-post. Even if it’s just a short one.

At this very moment I’m celebrating the fact that Internet Explorer 10 now supports text-shadows kinda excessively! Finally! Even Internet Explorer made it! Yayyyy!

For more details on this, please go and check out the Internet Explorer 10 Guide for Developers. Microsoft developers explain the usage of text-shadow here. But I guess it should be pretty clear how to use them as other browsers support them like forever.

Thanks goes out to Louis Lazaris for his tweet about it. Also @IE tweeted about this.

There are also some other cool things in Internet Explorer 10 concerning CSS3 stuff like hyphenation and animations. This is so worth it, Microsoft. Thanks for finally keep track with other browser vendors.

Another thing that’s pretty cool is support for so many HTML5 features in Internet Explorer 10 Platform Preview 3.

CSS3: Auto Hyphenation for Text-Elements

In browsers we do not have the ability to automatically hyphenate continuous text. This is an issue when you are using text-align: justify; for instance because the text may look really bad.

I want to write about this topic because of the discussion that came up at the HTML5 Boilerpates issue-list and this blogpost at Fontdeck Blog.

The specification says:

Hyphenation means splitting words to improve the layout of paragraphs.

CSS3 Properties

CSS3 adds six properties to the list of useful thing. These are:

  • The most important one is hyphens. More to this one later.
  • You can add dictionary-files with hyphenate-resource so the browser has a better chance to render your text with the right hyphenation.
  • hyphenate-before sets a minimum number of characters before the hyphenation.
  • hyphenate-after does the same as hyphenate-before but for characters after the hyphenation.
  • hyphenate-lines defines about how many lines a hyphenated word is written at a maximum.
  • with hyphenate-character you can specify which HTML-entity should be used, e.g. \2010.

The main property of this stack is hyphens. It accepts one of three values: none, manual or auto. The default one is manual, where you can set hyphens via &shy;. auto it the better one for continuous text while words get split if possible and available. And none does not hyphenate at all even if there is a character set for a possible line break in a certain word.

There is one thing you have to be aware of if you use this property: You have to define a lang-attribute on an element that carries text that should be hyphenated.

I made this jsFidde where no lang-attribute is set. It does not work in Firefox. With this attribute set, it works quite good in Firefox, too (thx to 91media).

Browsersupport

Currently hyphens is supported in Safari 5.1 and Firefox 6. For Firefox 6 the lang-attribute must be set as mentioned above. Also it only supports english.
It is not working in Chrome 15.

You have to add some vendor-prefixes for support in browsers:

.element {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

There is a polyfill for this. It’s working with JS and inserts the HTML special-char &shy; where it fits. It supports many languages. This polyfill also uses the CSS-property where it is possible.

Edit:
Thanks to Ash for letting me know about my mistake using hyphen instead of hyphens.

Update

I just found this issue at the Modernizr issue-tracker where a test for the hyphens-attribute is discussed. There is a test in the latest GitHub-Version for it. Search for csshyphens.

Update 2: 12.11.2012

-webkit-hyphens has now landed in Chrome Beta.