Let's try and pull it off on the web.

The HTML

Like any slider, there are three main components:

• The container that holds everything into shape
• A sliding container that is as wide as all the slides in a row
• Each individual side container

We won't bother too much with content inside the slide. I'll just add the temperature to show each slide can indeed hold content on top.

<div class="slider" id="slider">
  <div class="holder">
    <div class="slide" id="slide-0"><span class="temp">74°</span></div>
    <div class="slide" id="slide-1"><span class="temp">64°</span></div>
    <div class="slide" id="slide-2"><span class="temp">82°</span></div>
  </div>
</div>

The container might be a <section>, slides might be <article>. It really depends. I'll let you make the semantic choices for your own needs.

The layout plan is like this:

The CSS

The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.

.slider {
  width: 300px;
  height: 500px;
  overflow-x: scroll;
}
.slide {
  float: left;
  width: 300px;
  height: 500px;
}

Floating those slides to the left isn't going to make them line up in a row, because the parent element of the slides isn't wide enough to let them do that. That's one of the reasons we need the holder element. It will be 300% wide (Num. of slides × 100%) which will fit three slides exactly.

.holder {
  width: 300%;
}

Each one of our slides has a unique ID. This is useful because, if we choose, we can create anchor links that link to those ID's and the slider will "jump" to those slides. We'll add JavaScript to do some actual "sliding", but our slider will work even without that. ID's make that possible, so let's use them here to drop in some lovely background images.

#slide-0 {
  background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
  background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}

With all this in place, our layout comes into shape:

The CSS (black fading)

Just as a small detail, the temperature set in white may be in danger of not being visible depending on the photo behind it. To ensure that it is, we can make the photo subtly fade to black toward the bottom. A pseudo element will do nicely.

.slide:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, black);
}

A picture explanation is in order here:

The JavaScript (background sliding)

We're going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn't do the cool hide/reveal more effect we're looking for. Based the amount scrolled (which we can measure in JavaScript), we'll adjust the background-position. Alone, that would look something like this:

$("#slider").on("scroll", function() {
  $(".slides").css({
    "background-position": $(this).scrollLeft()/6-100+ "px 0"
  });  
});

The "6" and "-100" in there are magic numbers. Not CSS magic numbers that are prone to frailty, but traditional magic numbers. Just some numbers that happen to make the effect work. A bummer, perhaps, but not that big of a deal. Design-y things are sometimes like that. Perhaps best to leave a comment in the code to that effect. These particular numbers are based on the images I used and their size and what looked good.

The effect here is the background shifting we're after:

The JavaScript (imparting structure)

That little snippet of JavaScript looks lonely up there without any structure behind it. A slider is a great excuse to look at a simple way to structure JavaScript.

We can make everything slider-related one object.

var slider = {

};

Then we'll group up the related elements into one area, bind our events together, and write little functions that do very specific things.

var slider = {
  
  el: {
    slider: $("#slider"),
    allSlides: $(".slide")
  },
 
  init: function() {
    // manual scrolling
    this.el.slider.on("scroll", function(event) {
      slider.moveSlidePosition(event);
    });
  },
  
  moveSlidePosition: function(event) {
    // Magic Numbers
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });  
  }
  
};

slider.init();

The HTML (adding navigation)

Adding swipe stuff would be super (super) sweet (hint). But for now let's add little press-able links to change slides, rather than relying on the scrollbar. You might even remove the scrollbar in real life (straight up overflow: hidden; on the container). What we need is anchor links that link to the ID's of the individual slides.

<nav class="slider-nav">
  <a href="#slide-0" class="active">Slide 0</a> 
  <a href="#slide-1">Slide 1</a> 
  <a href="#slide-2">Slide 2</a> 
</nav>

Style those as you will. For the demo, I make them little tiny gray circles with the text hidden.

The JavaScript (adding navigation)

Our structure is more useful now. We simply add a few more elements we're dealing with, add a new event we're watching for (clicks on nav), and write a little function to deal with that event.

We know how far to animate the scroll position when a nav link is clicked from the ID on the link itself. The link might be href="#slide-1", which we can get "1" from easily. Then the position we need to scroll to is (1 × width of slide), so 300 in our case. We'll store that 300 value right in the JavaScript.

var slider = {
  
  el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNav: $(".slider-nav"),
    allNavButtons: $(".slider-nav > a")
  },
  
  timing: 800,
  slideWidth: 300, // could measure this
  
  init: function() {
    // You can either manually scroll...
    this.el.slider.on("scroll", function(event) {
      slider.moveSlidePosition(event);
    });
    // ... or click a thing
    this.el.sliderNav.on("click", "a", function(event) {
      slider.handleNavClick(event, this);
    });
  },
  
  moveSlidePosition: function(event) {
    // Magic Numbers
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });  
  },
  
  handleNavClick: function(event, el) {
    // Don't change URL to a hash, remove if you want that
    event.preventDefault();

    // Get "1" from "#slide-1", for example
    var position = $(el).attr("href").split("-").pop();
    
    this.el.slider.animate({
      scrollLeft: position * this.slideWidth
    }, this.timing);
    
    this.changeActiveNav(el);
  },
  
  changeActiveNav: function(el) {
    // Remove active from all links
    this.el.allNavButtons.removeClass("active");
    // Add back to the one that was pressed
    $(el).addClass("active");
  }
  
};

slider.init();

We have an "active" class on the nav links just to use in CSS to visually indicate which slide is active. We handle that by removing "active" from all links and then adding it back to the one that was clicked.

Demo!

Check out this Pen!

Slider with Sliding Backgrounds is a post from CSS-Tricks

Web designers and developers have always fascinated us with fun and engaging ways we interact with their websites. I love discovering new techniques that these designers/developers have come up with. One technique in particular that sparked my interest is something that I saw on Warby Parker’s website. They were able to create a cool effect where model follows the user’s mouse, showing off the different angles of the frames.

I’ve seen this technique mainly used for showing off sunglasses, but I’m interested to see what you guys can come up with for other real-world applications.

Before we begin, you will need a few things. Well, seven things to be exact. You are going to need seven photos of something taken at seven different angles.

HTML Setup

What we are setting up is a container called “faces”, then have created an area that we are going to use to display the photos – “face-area”. We also have a div to hold each of the seven individual images.

<div id="faces">

  <div id="face-area">

    <div id="image-1" style="display: none;">
      <img src="/images/look-left-3.jpg">
    </div>

    <div id="image-2" style="display: none;">
      <img src="/images/look-left-2.jpg">
    </div>

    <div id="image-3" style="display: none;">
      <img src="/images/look-left-1.jpg">
    </div>

    <div id="image-4" style="display: none;">
      <img src="/images/look-center.jpg">
    </div>

    <div id="image-5" style="display: none;">
      <img src="/images/look-right-1.jpg">
    </div>

    <div id="image-6" style="display: none;">
      <img src="/images/look-right-2.jpg">
    </div>

    <div id="image-7" style="display: none;">
      <img src="/images/look-right-3.jpg">
    </div>

Now we'll create a div that is going to do exactly what the name implies. It is going to lay on top of the other div. We can divide this div into 7 small columns and divide them equally across it. These 7 columns will be used to listen for when the mouse is hovering over that specific one. Adding “data-number” to each div will allow us to refer to each in jQuery later on.

    <div id="the_faces_overlay">
      <div class="the_faces" data-number="1"></div>
      <div class="the_faces" data-number="2"> </div>
      <div class="the_faces" data-number="3"></div>
      <div class="the_faces" data-number="4"></div>
      <div class="the_faces" data-number="5"></div>
      <div class="the_faces" data-number="6"></div>
      <div class="the_faces" data-number="7"></div>
    </div> 

  </div><!-- END #face-area -->

</div> <!-- END #faces --> 

CSS Setup

Most of the CSS is pretty self-explanatory. There is one thing I need to mention that is important, make sure that the 7 columns fit perfectly together across the span of the div.

body {
  background: #333 
}

#faces {
  height: 333px;
  width: 500px;
  margin: 0 auto;
  border: 8px solid white;
}

#face-area {
  height: 500px;
  width: 333px;
  position: relative;
}

#the_faces_overlay {
  position: absolute;
  width: 500px;
  top: 0;
  left: 0;
}

#faces .the_faces {
  height: 333px;
  width: 14.2857143%;
  float: left;
  margin: 0;
  padding: 0;
}

jQuery Setup

We need to listen for when each of the columns are hovered over. This is where those “data-numbers” come in handy. If we wanted to add more columns down the road we wouldn't have to add any more JavaScript.

// Reveal the "center" image
var centerImage = $("#image-4").show();

// Bind hovers to each column
$(".the_faces").each(function() {

  $(this).on("mouseover", function() {
  
    $("#image-" + $(this).attr("data-number")).show();
  
  }).on("mouseout",function() {
  
    $("#image-" + $(this).attr("data-number")).hide();

  });
  
});

// Reset center image
$("#face-area").on("mouseleave", function() {
  centerImage.show();
}).on("mouseenter", function() {
  centerImage.hide();
});

Tada!

Check out this Pen!

There you have it! Now you have your very own, head turning model. Use it to show off your very own products. There are tons of uses for this out there. Let me know what you come up with.

Editor's note: this would be a fun demo to work on adding touch support, wouldn't it? Follows a swipe or something.

Photo Swivel is a post from CSS-Tricks

Media queries were first introduced more than twelve years ago (yes, the first draft dates back to 4 April 2001!) and were introduced to limit the scope of a style sheet:

A media query consists of a media type and one or more expressions to limit the scope of a certain style sheet. […] By using media queries, content presentations can be tailored to a range of devices without changing the content itself.

With media queries in CSS we can selectively use styles depending on, for example, the width of browser screen:

@media screen and (min-width: 960px) {
  body {
    padding: 50px;
  }
}

In the example above, if your browser screen is wider than or equal to 960px, the body will have 50px of padding.

DOM events triggered from CSS animations

A simple click event:

document.querySelector('a.button').addEventListener('click', function(event) {
  // do something
});

Nothing fancy here, just standard DOM programming. The click event, among many other events, are generated when the user interacts with the page: clicks, moves the cursor, scrolls the page and so on.

All of these events are related to the DOM, and generates as a consequence of user's interactions. There are also some events which are specifically related to CSS animations: animationStart, animationEnd (and their transition cousins, transitionStart, transitionEnd).

If we insert a new element onto the page and it has an animation, we know that CSS animation will start as soon as it is inserted. So if we watch for the animationstart event of that animation, we can know when it was inserted.

@keyframes nodeInserted {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }
}
.an-element {
  animation-duration: 0.001s;
  animation-name: nodeInserted;
}

document.addEventListener("animationstart", function (event) {
  if (event.animationName == "nodeInserted") {
    // an element with class an-element has been inserted in the DOM
  }
}, false);

Thanks to David Walsh, Daniel Buchner, and Omar Ismail for blogging about this around a year ago.

Putting together media queries and animations

Perhaps you can see where this is going. If we trigger the animation when a media query changes (rather than on node insertion), we can also detect when that media query change happened in our JavaScript.

body {
  animation-duration: 0.001s;
}
@media screen and (min-width: 1000px) {
  body {
    animation-name: min-width-1000px;
  }
}
@media screen and (min-width: 700px) {
  body {
    animation-name: min-width-700px;
  }
}

@keyframes min-width-700px {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }
}

@keyframes min-width-1000px {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }
}

document.addEventListener(animationEnd, dispatchEvent, false);

// check the animation name and operate accordingly
function dispatchEvent(event) {
  if (event.animationName === 'min-width-700px') {
    document.body.innerHTML = 'Min width is 700px';
  } else if (event.animationName === 'min-width-1000px') {
    document.body.innerHTML = 'Min width is 1000px';
  }
}

Editor's note: choose your names wisely.

Demo on CodePen:

We have the same simple animation that doesn't actually do anything, but this time, the animation is inside an @media block.

If the window becomes wider than 700px, the min-width-700px animation will trigger, and our dispatchEvent will get this information. Think of it like a callback. We can then adapt our page by showing new widgets, destroying others, or whatever else you need to do to adapt to the new screen size.

The cool thing is that we don't need to use the window resize event, which can be slow and fire too many times (throttling is normally needed). The animationstart event will trigger as soon as the Media query matches, even if we didn't resize the window. If we then resize the window, the event will fire just when the media query matches.

The right way to do these things

Now we've talked about how to get JavaScript callbacks of window width changes, without relying the resize event.

But I wouldn't suggest you to put this in production code. It works, but the right way to do this should be to use the matchMedia method, which returns a MediaQueryList. MediaQueryList objects can have listeners, and thus we can use the addListener method to get notified when a Media query matches or not.

Enquire.js has recently reached version 2, and wraps the matchMedia method, which gives us a clean and robust wrapper.

Media Query Change Detection in JavaScript Through CSS Animations is a post from CSS-Tricks

In Sass, the @mixin would look something like this:

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 650px)  { @content; }
  }
}

And you'd use it like:

.module {
  width: 25%;
  @include breakpoint(baby-bear) {
    width: 100%;
  }
}

Although in reality I prefer something like "bp" just because it's shorter and you need to type it all the time. Which is why "+" would be so ideal instead of "@include". But I digress. Or you could go Brandon Mathis style:

$name1:  320px;
$name2:  500px;
$name3:  600px;
$name4:  992px;

@mixin at-least($device-width) {
  @media screen and (min-width: $device-width) {
    @content 
  }
}

@mixin until($device-width) {
  @media screen and (max-width: $device-width - 1) {
    @content 
  }
}

The names should avoid actual numbers. The point here is to assign a name with abstracted meaning, so the numbers can change but the names stay the same. I'd avoid device names like "iPad" or whatever too, because that just sets up bad expectations and will date itself quickly.

Better are naming schemes that suggest relationships between the names themselves. Where one is obviously bigger or smaller than another. Of course this is assuming width queries, which are certainly the most common. But of course your media queries could be different or more complex, and the naming scheme should represent that.

Here's some ideas:

baby-bear
mama-bear
papa-bear

straw-house
stick-house
brick-house

private
corporal
sergeant
captain
major
lieutenant
colonel
general

alpha
beta
gamma
delta
epsilon

very-small
small
medium
large
very-large

-
--
---
----
------

>-<
[---]
<----->

seed
seedling
sprout
plant

pebble
stone
rock
boulder

pawn
knight
queen
king

bishop
archbishop
cardinal
pope

eddard
catelyn
robb
sansa
arya
bran
rickon

knife
dagger
scimitar
claidmore

A
B
C
D
E

From Vince Speelman

lil-bowow
eminem
jay-z
krs-one
rick-ross

From James Nowland

matryoshka-doll
the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-the-one-inside-matryoshka-doll

From Philip Brown

michael
jermaine
jackie
marlon
tito

From Rob Stinogle

gandalf-the-gray
gandalf-the-white

From Darby Brown

stewie
brian
chris
lois
peter
(I leave out Meg)

Got some other ideas?

Naming Media Queries is a post from CSS-Tricks

There are a couple of ways to get it done, none of them spectacular.

In case that explanation wasn't clean, imagine you have some HTML like this:

<div class="module">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

And you want to limit it to exactly three lines in a container. Like this:

In all these examples, let's assume we have a "module".

.module {
  width: 250px;
  overflow: hidden;
}

Weird WebKit Flexbox Way

David DeSandro showed us this little ditty a few years ago.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

One one hand, this is awesome and exactly what we need. CSS the perfect place for this. It's a real need and it should be this simple.

On the other hand... it's weird. why does it need to be a flexbox thing (the old version at that)? It doesn't work without that. And it's extremely fragile. Let's say you want the module (or the paragraph) to have some padding. You can't, because the padding will expose extra lines. That's what we get with half-baked non-standardized properties.

The Fade Out Way

The root of this technique is just setting the height of the module in a predictable way. Let's say you set the line-height to 1.2em. If we want to expose three lines of text, we can just make the height of the container 3.6em (1.2em × 3). The hidden overflow will hide the rest.

But it can be a bit awkward to just the text off like that. Ideally we would add ellipsis, but we can't reliably position them. So instead we'll fade out the text achieving the same kind of communication ("there is more...").

To fade out the last line, we make a box (a pseudo element will work great) and overlay a transparent-to-background-color gradient over the top. Making it nearly as wide as the container is best in case the last line is short. Because we know the line-height, we can make the pseudo element box exactly one line tall.

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

The Opera Overflow Way

Like WebKit, Opera has their own way to handle this. They apply ellipsis on the line you wish to. Of course the clock is ticking for Presto (Opera's rendering engine pre-Blink) so this isn't particularly useful. Perhaps it can still inform a future implementation though.

.last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-ellipsis-lastline;
}

The Clamp.js Way

Where there is a will there is a way (with JavaScript). I think that's a saying. Joseph J. Schmitt has an excellent library-free JavaScript thingy called Clamp.js for making this happen in a cross-browser way.

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

Make sure you target the element with the text directly inside of it. Originally I tried putting the ID on the module, which worked in Chrome/Safari, but failed in Firefox. Putting it on the <p> made it work in both (Thx Merri).

The Demos

Check out this Pen!

Updates

Vesa Piittinen created an alternative method to Clamp.js.

Unlike Clamp.js it retains all the text within the clamped element and uses text-overflow to do the magic.

FT Labs also has created a JavaScript plugin to do the job. It's nice in that you don't have to specify the number of lines, it just happens when the text overflows the container, so the design decision stay in the CSS.

Both of these examples have been added to the main Pen.

Line Clampin’ is a post from CSS-Tricks

Direct Link to Article — Permalink

CSS Zen Garden is a post from CSS-Tricks

Direct Link to Article — Permalink

How to mark up subtitles is a post from CSS-Tricks

Direct Link to Article — Permalink

Making accessible icon buttons is a post from CSS-Tricks

People love to make flat things appear as if they're three-dimensional. There are two ways to pull off this effect in a 2D environment, shape and movement.

By give a flat shape the appearance of edges or sides, we can make buttons or other objects appear as if they are raised or sunken into the screen. This is seen even here on CSS-Tricks:

The movement effect is a bit trickier. In a three-dimensional world, objects closer to you move fast, while the ones further away move slow. The further away an object is, the slower it moves. This is called the parallax effect. The parallax effect has been used in all sorts of places for the past few years.

The first method, shape, works because it makes things appear to be popping out, or pushed away from you. The second method, movement, works because it makes things seem as if they are positioned in context with each other. But, what if we combined them. An object that looks sunken into the screen, like a shelf, and its edges shrink and grow, using the parallax effect, making the object appear as if it really is in 3D space.

First we need to add some markup on our page and give the items we want to affect the class of inset. Any block level elements will do. Here is a simple form with inputs that will have the effect applied.

<form>

  <label>
    First Name:
    <input class="inset" type="text" placeholder="Enter First Name" />
  </label>

  <label>
    Last Name:
    <input class="inset" type="text" placeholder="Enter Last Name" />
  </label>

  <label>
    Email Address:
    <input class="inset" type="text" placeholder="Enter Email Address" />
  </label>

  <label>
    Address:
    <input class="inset" type="text" placeholder="Enter Address" />
  </label>

  <label>
    Phone Number:
    <input class="inset" type="text" placeholder="Enter Phone Number" />
  </label>

</form>

Next we will need to style our inset elements. By giving the item slightly different color borders we can give the element the illusion of depth. This is because the joint between borders is an angle and with the different colors, it appears as if light is hitting different "sides" of a 3D area. This is the 'shape' method we mentioned earlier.

.inset {
  width: 100%;
  box-sizing: border-box;
  background: #f9f9f9;
  border-style: solid;
  border-width: 30px;
  border-top-color: #e5e5e5;
  border-right-color: #eee;
  border-bottom-color: #e5e5e5;
  border-left-color: #eee;
}

Now that the shape we want to manipulate is styled, we can use some simple jQuery to get the element's original border-width, window height, scroll position, target element's position on screen and convert that position to a percentage for the top edge and bottom edge.

var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window),
windowHeight = win.height();

$('.inset').each(function() {
  var self = $(this),
    scrollHeight = win.scrollTop(),
    elementPosition = self.position(),
    positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
    positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
});

Once we have all of these numbers as variables, we can resize the top and bottom border-widths of each element based on its position on the screen.

var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window),
windowHeight = win.height();

$('.inset').each(function() {
  var self = $(this),
    scrollHeight = win.scrollTop(),
    elementPosition = self.position(),
    positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
    positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);

  self.css({
    'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
    'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
  });
});

Now comes the fun part – recalculating each element's top and bottom border-widths while the page is scrolled. This will give us the desired parallax, 'movement' effect.

var origBorderWidth = parseInt($('.inset').css('border-top-width')),
  win = $(window);

function set3D() {
  var windowHeight = win.height();

  $('.inset').each(function() {
    var self = $(this),
      scrollHeight = win.scrollTop(),
      elementPosition = self.position(),
      positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
      positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);

    self.css({
      'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
      'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
    });
  });
};

win.on('load scroll resize', function() {
  set3D();
});

There you have it. To see the effect, keep you eye on a single element as it moves up and down the page when scrolled. You will see its top and bottom border-width change depending on its position on the page. Its subtle, but effective.

Check out this Pen!

3D Inset Parallax Effect is a post from CSS-Tricks

Why Server Side?

You might want to serve an entirely different layout or different part of a layout if you know (for sure) you are serving to a small mobile device. Or a TV. Or whatever. See this article.

Put the Data in a Cookie

I think the easiest way to make client side information available server side is by putting that data in a cookie. Cookies are sent in the headers of all requests to that domain, so the server has access to them. If that cookie has information in it about how big the browser window is, the server can use it.

Cookie Logic

In order to make the smart choices you want to make, you need this cookie to exist. If it does exist, cool. If it doesn't exist, do the bare minimum you need to do to client test, set the cookie, then refresh.

In PHP, just to illustrate:

<?php if isset(($_COOKIE['_clientInfo'])) { ?>

   <p>You have the cookie, so put in your logical stuff here and load the document as you will.</p>

<?php } else { ?>

   <p>You don't have the cookie yet, so don't load anything but the resources you need to test the client and set the cookie. Then refresh.</p>

<?php } ?>

Setting the Cookie

What kind of information might you want? Screen size likely. Probably anything that Modernizr would be able to tell you.

It's easy to set a cookie in JavaScript.

document.cookie = "cookieName=" + value;

Make the value easy for you to parse and do what you need with. Here let's make it a string of JSON. We'll make an object with all the data we want and use some jQuery and Modernizr to get the values we want to know.

var clientInfo = {
  browserWidth: $(window).width(),
  browserHeight: $(window).height(),
  flexboxSupport: Modernizr.flexbox,
  SVGSupport: Modernizr.svg
};

document.cookie = "_clientInfo=" + JSON.stringify(clientInfo);

In testing, I had some issues with Opera so switched to the jQuery cookie plugin and it was fine.

var cookieVal = JSON.stringify(clientInfo);

$.cookie("_clientInfo", cookieVal, {
  expires: 7
});

Refresh After Setting the Cookie

Now that the cookie is set, you can refresh the page so the document can actually load with all this juicy information available.

window.location.reload();

Jank Alert?

If you don't like the idea of refreshing, you could write it up so you load some kind of default document at the same time you are setting the cookie. No harm there.

How Long Should the Cookie Last?

I dunno. An hour maybe? Forever? There is some chance that you catch somebody when their desktop browser is in an unusual state. Like they have it super small, and they load your page, and they then get a small screen version forever. Or an update to that browser comes out with more advanced features but your old cookie is there. Your call.

Here's an example of one hour:

var now = new Date();
var time = now.getTime();
time += 3600 * 1000; // one hour
now.setTime(time);

document.cookie = "_clientInfo=" + JSON.stringify(clientInfo) + ";expires=" + now.toGMTString();

Using the Info Server Side

Using PHP just as an example, you can easily snag the cookie and access bits of the data we saved as JSON.

<?php
  $json = $_COOKIE['_clientInfo'];
  $obj = json_decode(stripslashes($json));
  echo "<p>Browser Width: " . $obj->{'browserWidth'} . "</p>";
?>

You wouldn't just echo it out like above, you'd use some logic on that data and do whatever fancy special serving of resources and content you are going to do.

Using the Info Client Side

The point of this is server-side access, but, you have access to that cookie on the client-side too. This means, theoretically, you wouldn't need to load Modernizr again because you already have that information.

Here's a simple example that gets the data and displays a part of it:

var clientInfo = JSON.parse("<?php echo $_COOKIE['_clientInfo']; ?>");
var output = "<p>Browser Width: " + clientInfo.browserWidth + "</p>";
$("#clientInfo").append(output);

Demo

World's simplest demo just to show it's do-able.

Downsides?

I dunno. I suspect there are a bunch otherwise I would think this kind of thing would be done more often. Smart people: chime in in the comments and let me know the ups and downs.

I suspect it might complicate caching. Perhaps that much reading/sending of the cookie is an issue? What about people that don't allow cookies like this? Gotta make sure they don't get in any kind of infinite loop or have the site be unusable.

Other Things

• The first I heard of this kind of thing being used was in Matt Wilcox's Adaptive Images where the screen resolution is saved as a cookie and used to make choices about what kind of images to use.
• Client-Hints is also a thing that aims to give us this information without all this fancy dancing.
• James Pearce's modernizr-server:
  

  The modernizr-server library is a way to bring Modernizr browser data to your server scripting environment.

• Dave Molsen's Detector:
  

  Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

• Shane Gliser talks about doing this but saving to HTML5 localstorage in his book Creating Mobile Apps with jQuery Mobile

Make Client Side Data Available Server Side is a post from CSS-Tricks