This Week in CSS—November 25, 2013

Here are some nice links that we’ve gathered for you this week:

Articles

Which CSS colour system to use.

Another article on Responsive email templates, this one including a framework for creating emails.

If you are reluctant to check out a CSS preprocessor like Sass, perhaps this Why Use Sass intro by Dan Cederholm will inspire you. It’s the first chapter of his new A Book Apart book.

If you want to brush up on the CSS box model, and how it’s affected by the new box-sizing property, you might find this article on the box model useful.

There have been lots of links to responsive image articles of late, and here’s another! Chris Coyier discusses Why Responsive Images Is So Hard.

Vertical Percentages in CSS

Karen McGrane reminds us that Responsive Design Won’t Fix Your Content Problem

Resources

If you are trying to get into Flexbox, you might find this Ultimate Flexbox Cheat Sheet helpful.

There are so many CSS frameworks out there, it’s both hard to keep track of them all, and hard to remember what each is good for, what (if any) preprocessor it uses, etc. Here’s a handy table outlining some of the most popular frameworks and their features.

Demos

Creating a cool dashed background (Note: the CSS uses the Sass syntax, so it will look strange if you’re not into that. You can still view source in your browser to see the real CSS, though.)

Frosted Glass effect with CSS and SVG

Heck, why not: recreate the James Bond intro sequence in CSS! (Apparently best viewed in Chrome or Firefox.)

Just because they can, I guess … Here’s an old fashioned Mac Plus, created in CSS alone. (Article about it [URL=“http://hop.ie/blog/macplus/”]here.)

CSS stopwatch.

Interesting News

Here are the results of a recent Twitter poll by Lea Verou, gauging how many developers still test they layouts in IE8. The results are quite astounding.

Goof time

OK, not CSS stuff, but if you want some light entertainment, check out What Rhymes with Hug Me?, or if you need something more intellectual, check out this awesome Bohemian Gravity video explaining string theory—to some familiar chords of Queen:

//youtu.be/2rjbtsX7twc

[rule=100%]orange[/rule]

Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue. :slight_smile:

You can also view a list of previous posts here.

Just wanted to drop by and say how much I enjoy these CSS roundups. They’re fantastic, Ralph! :tup:

Thanks Maleika! It’s nice to see you around. Glad someone finds them useful. :slight_smile:

I confess I haven’t looked at the “useful” stuff yet, but the String Theory video is just wonderful. Thank you for that alone. :slight_smile:

The ThisWeekInCSS topics are always uploading my curiosity battery too. :slight_smile:

This time after reading the article “[U]Vertical Percentages in CSS[/U]”: “That I’ve to see with my own eyes!”


I’m afraid I don’t have enough time to read all other links before the next ThisWeekInCSS is falling in the forum. :wink:

Nice little article Francky :slight_smile:

We (Tommy and I) documented a lot of the bugs you mention with percentage margins some years ago in the Sitepoint reference.

Note that even for the top and bottom margins the percentage value will refer to the width of the containing block.

If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent’s width to compute its margin (and hence its dimensions).

The IE specific bugs that you noticed are then listed underneath.

A neat trick with vertical percentage margins is that you can create perfectly square boxes (if you wanted - perhaps for a series of background images).

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.fl {
	float:left;
	width:20%;
	background:red;
	margin:10px;
}
.fl:after {
	content:"";
	display:block;
	margin-top:100%;
}
</style>
</head>

<body>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</body>
</html>

Nice work, Francky. A lot to digest there. I love the square box example too, Paul. :slight_smile:

Ah, I see.

Yes, beautiful! :slight_smile:
If the normal margin is also a percentage, you can get a [U]zoomable polka dot[/U] background. :wink:

I’m seeing spots before my eyes :slight_smile:

Freakin’ out on dots? [U]auto-zooming-polka-dots.htm[/U] *) :smiley:
(WARNING: not for people with a predisposition to epilepsy.)

BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.


*) In the webkit browsers (Chrome, Opera, Safari) the rotation doesn’t work. In Firefox and IE11 it’s alright.

My eyes !!

BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.

You’d probably need the display:table routines with extra html.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.fl {
	float:left;
	width:20%;
	background:red;
	margin:10px;
	position:relative;
	text-align:center;
}
.fl:before {
	content:"";
	display:block;
	width:1px;
	height:1px;
	margin:100% 0 0 -1px;
}
.fl div {
	margin:0;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.fl p {
	display:table;
	width:100%;
	height:100%;
	margin:0;
}
.fl  span {
	display:table-cell;
	padding:10px;
	vertical-align:middle;
	line-height:1.0;
}
</style>
</head>

<body>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
<div class="fl"><div><p><span>Some text</span></p></div></div>
<div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
</body>
</html>

You need the webkit prefix in the -webkit rules here:


@-webkit-keyframes pulsor {
	0%   { width:100%; margin-left: 0; padding-top: 100px;}
	60%  { -webkit-transform: rotate(0deg);} 
	75%  { -webkit-transform: rotate(360deg);}
	100% { width:300%; margin-left: -100%; padding-top: 0; -webkit-transform: rotate(0deg); }
	}


That should rotate in webkit now :slight_smile:

Thanks, I forgot them. Updated! :slight_smile:

=======

BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.

I really didn’t expect that somebody we all know would interpret this as a question. :wink:

But fabulous! :slight_smile:
I tried it almost in the same way with extra html elements and display:table / display: table-cell, but the square dimensions and the percentages jumped to all sides, and mostly the opposite way as I intended! The .fl:before instead of .fl:after did the trick.

I was impressed with the way this page changes when zoomed on a tablet:

http://tech.small-improvements.com/2013/11/28/analysing-performance-of-angularjs-screens/