Time Recursion

The CSS specification is getting some more advanced rules for image manipulation. If you're familiar with Photoshop Blend Modes, you'll find CSS Blend Modes surprisingly similar. It's still far from the flexibility the image editing tools offer, but we can already achieve some pretty amazing effects.

Now, let's get to the point. To make it more interesting, I'll walk you through some of the possibilites, by taking you along our family trip from last month.

The trip:

We started by packing our things and strapping my son Filip into his hiking carrier. The image doesn't really need a caption, but we can aswell add one, just for the sake of it. Since the blue color is a bit rough on the picture, we can smooth it by adding mix-blend-mode: color; on the h2 element in the second image box.

.image {background:url('gettingready.jpg');} .image h2 {color:blue;} .image2 h2 {mix-blend-mode: color;}

Looks like I should have chosen a different color, but you get the point.

It was cold, there was fresh fluffy snow everywhere and a warm sun shining on us through the day. A beautiful day. My wife took this picture of me and my son, just a few meters from our goal, the St. Jacob's church.

Now let's try to darken a bit that shining snow on the ground. We could use a gradient for background, and nest our image within. Without the mix-blend-mode property, we would see only our picture, covering the gradient background. Now, if we set the picture to mix-blend-mode: multiply;, the gradient comes through.

.background {background: -moz-linear-gradient(top, #ffffff, #000000); /* this one is for Gecko browsers */} .background .image {background:url('ontheroad.jpg');} .background2 .image {mix-blend-mode: multiply;}

And here's the result:

After this refreshing trip, Filip fell asleep almost immediately, not even waiting to be taken out of his carrier. So we just left him there for a couple of minutes, while we enjoyed the view and the warm sunrays.

In the last picure I tried to give it a more "sunny" look, so I set a light yellow color as background, and set the mix-blend-mode on the picture to darken.

.background {background: #fff8a6;} .background .image {background:url('after.jpg');} .background2 .image {mix-blend-mode: darken;}

These are just a few examples of what you can do with Blend Modes in CSS, pairing them with :hover effects for example, opens up some interesting possibilites. And surprisingly enough, the browser support is pretty good already, especially in Firefox and Safari: http://caniuse.com/#feat=css-mixblendmode

Last time we talked about the :not() pseudo-class selector and it's improvements in CSS4 over it's original design in CSS3. Today, we're going to look at a new pseudo selector :has(), which allows us to match elements that contain a specific element or element with class.

For example, the following rule will match any p elements that contain a link and a background color to those elements.

p:has(a) { background: #adcaf2; }

This opens some neat possibilities, especially when combined with the :not selector. If I would like to match only h1 headings that don't contain a span element I could use the following example:

h1:not(:has(span)) { margin-bottom: 1em; }

:not pseudo-class selector is part of the well supported CSS3 standard and received an upgrade in CSS4. The way it works is that you pass a selector to say that you don't want a style applied to this element.

For example. If we want to make all bold text red, except the bold text with a class simple, we could use the following rule:

strong:not(.simple) { color: red; }

In CSS4 we can pass a comma separated list of selectors, giving us greater control and flexibility. Like so:

When developing websites and web apps for mobile devices (smartphones and tablets) you need to know the user's device, and in some cases even the OS version to appropriately render content and perform other tasks. For most cases you can use Modernizr which is a great tool for feature detection in browsers. But when you need to minimize load, you're often forced to use custom solutions.

This used to be pretty straightforward, until the latest User-Agent update in Windows Phone 8.1 Update

The new User Agent string for Windows Phone 8.1 Update Internet Explorer now looks like this:

Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11; IEMobile/11.0) like Android 4.1.2; compatible) like iPhone OS 7_0_3 Mac OS X WebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari /537.36

What this means is that using conventional detection would register the latest Windows Phone OS as an Android and iOS device as well as a Windows Phone. To make matters worse, IE 10 is in many cases behaving differently than IE 11 on mobile devices, so we have to filter it out. The same goes for Windows Phone 8.1 (pre update) versus the Update - again, different behaviour in browsers. You can look at the code below to see, how to identify different OS and browsers. We need almost no additional differentiation on iOS and Android, while we have to map almost every single update to IE separately, because each iteration has some major behavioural changes.

// USER AGENT IDENTIFICATION var ua = navigator.userAgent.toLowerCase(); var platform = ""; var iPhone = ua.indexOf("iphone") > -1; var iPod = ua.indexOf("ipod") > -1; var iPad = ua.indexOf("ipad") > -1; var ios_43 = ua.indexOf("os 4_3") > -1; var isAndroid = ua.indexOf("android") > -1; var msie = ua.indexOf("msie") > -1 || ua.indexOf("iemobile") > -1 || ua.indexOf("wpdesktop") > -1; var msie10 = ua.indexOf("msie 10") > -1; var msie81 = ua.indexOf("windows phone 8.1") > -1; var msie81Update = false; if (msie && isAndroid && iPhone) { msie81Update = true; }

Now, because of the latest update, this doesn't suffice for correct identification. When checking for Android or iOS devices we always have to make sure, we're not targeting IE 11 WP 8.1 Update aswell, since it's mimicking the Android and iOS User Agent:

if (isAndroid && !msie81Update) { // Android } if (iPhone && !msie81Update) { // iPhone } if (iPad && !msie81Update) { // iPad } ...

Code Studio has a very nice introduction to programming with video lectures ang a guided visual interface that follows the story of Disney's Frozen. I think it's a wonderfull approach, that's appropriate for all ages.

Check out the intro!

I found a nice tutorial on "sketch like" avatar cropping using CSS clip-path rule and polygons on CSS-Tricks.

The tutorial is pretty straightforward and shows you how to cleverly put together a cross browser CSS snippet, that does the trick. The CSS code is written in SCSS, but since I prefer using LESS, I decided to rewrite it.

Here is the code:

Seriously. Use LESS CSS, you won't believe how fast your CSS styling will go. Here are just a few quick examples of its power:

You can nest selectors. Less code, better readability

CSS

#container { display: block; margin: 0 auto; } #container p { font-size: 1em; line-height: 1.1em; } #container p a { color: red; } #container p a:hover { color: pink; }

LESS

#container { display: block; margin: 0 auto; p { font-size: 1em; line-height: 1.1em; a { color: red; &:hover { color: pink; } } } }

Reusable functions save a lot of time and make code clean.

CSS

You have to define background properties for each element, with all browser specific prefixes.

#container { background: red; background: -webkit-gradient(linear, left top, left bottom, from(red), to(pink)); background: -webkit-linear-gradient(top, red, pink); background: -moz-linear-gradient(top, red, pink); background: -o-linear-gradient(top, red, pink); background: -ms-linear-gradient(top, red, pink); background: linear-gradient(top, red, pink); } #cell { background: red; background: -webkit-gradient(linear, left top, left bottom, from(red), to(yellow)); background: -webkit-linear-gradient(top, red, yellow); background: -moz-linear-gradient(top, red, yellow); background: -o-linear-gradient(top, red, yellow); background: -ms-linear-gradient(top, red, yellow); background: linear-gradient(top, red, yellow); }

LESS

Define a function once, use it anywhere.

.gradient(top, @color1, @color2) { background: @color1; background: -webkit-gradient(linear, left top, left bottom, from(@color1), to(@color2)); background: -webkit-linear-gradient(top, @color1, @color2); background: -moz-linear-gradient(top, @color1, @color2); background: -o-linear-gradient(top, @color1, @color2); background: -ms-linear-gradient(top, @color1, @color2); background: linear-gradient(top, @color1, @color2); } #container { .gradient(red,pink); } #cell { .gradient(red,yellow); }

And that's just the beggining. You can also define variables and reuse them, do calculations, transforms and apply filters on colors. You can even use functions to create decisions.

The United States is quickly losing it’s appeal to the world’s most talented immigrants, according to a new study. Researchers at Stanford and the University of Washington culled a large dataset from LinkedIn and found that the the number of PhDs choosing the U.S. as their home base fell by nearly half (29 percent in 2000 vs. 18 percent in 2012).