This Week in CSS: October 14, 2013

HTML & CSS
1

Here are some nice links that we stumbled across this week:

Articles

Kerry Butters posted an interesting article on CSS Regions this week—a pretty cool new tool in the CSS kit. There’s [URL=“http://www.webdesignerdepot.com/2013/09/introducing-css-regions/”]another recent article on the topic at Web Designer Depot.

An interesting alternative to CSS resets is on the way, in the form of ‘all: unset’

Here’s an interesting look at Repeating patterns in CSS with :nth-child and :nth-of-type,

Demos

Lea Verou demonstrates how to create trapezoids with 3D transforms.

Chris Coyier’s animated CodePen demo of how to make a triangle in CSS.

This is rather cool: Build a circular navigation bar with CSS3.

A simple way to learn some CSS Selectors.

Tools

Craig Buckler talks about what’s new in Chrome, including the ability to edit and save your CSS files through the browser itself. How much longer will we be using code editors when we can now edit CSS, HTML and JS right in the browser?

.selfCSS{} is a cool, online WYSIWYG CSS editor. It works on desktop and tablets, so might be a fun way to experiment with CSS and get more of an idea of how it works.

csste.st is a collection of tools for testing CSS changes across your projects. The site has links to some interesting tools, and is looking for people to help with the project.

And now for something truly Absurd. How would you like to write your CSS with JavaScript? If that sounds totally absurd, you’d be right. Check out Absurd.js, another CSS preprocessor to rival SASS and LESS.

Flying Focus is a JS file, but it’s pretty interesting from a CSS perspective, too. Watch the focus on elements fly around as you tab around the page.

Patternizer is a rather cool tool for creating CSS3 patterns.

This week’s feature: PODCASTS

There are lots of really interesting podcasts out there that focus on the web industry. Here is a selection of them that are worth checking out, particularly if you are interested in front end web design (those with * include transcripts):

ShopTalk Show, with Chris Coyier and Dave Rupert
The Web Ahead, with Jenn Simmons (which includes The Web Behind, with Eric Meyer—looking back at the history of the web)
The Big Web Show, with Jeffrey Zeldman
Boagword Podcast, with Paul Boag and Marcus Lillington
Unfinished Business, with Andy Clarke and Anna Debenham
Fripfrap, with Divya Manian and Garann Means
The Gently Mad, with Adam Clark.
The Non-Breaking Space Show, with Christopher Schmitt, Dave McFardland, Chris Enns.
The Breaking Development Podcast, with Jim King.
JavaScript Jabber, with Charles Max Wood.
99% Invisible, with Roman Mars and Sam Greenspan.
BizCraft, with Carl Smith and Gene Crawford.
The East Wing, with Tim Smith.
The PageBreak podcast, with Niki Brown and Liz Andrade.
The Industry, with Adam Stacoviak, Drew Wilson, and Jared Erondu.
This Developer’s Life, by Rob Conery and Scott Hanselman.
The UX Mastery Podcast*, with Luke Chambers and Matthew Magain.

There are lots more podcasts out there. If you have one to add to the list, let us know in the comments. If you have a favorite, tell us about it!

Tips of the Week

And lastly, some lighthearted tips for the week, courtesy of @H9RBSjs …

Always test your web app with CSS disabled to see what zero percent of your audience sees.

CSS3 Border Images: The only CSS feature that will reach “Proposed Recommendation” status before anyone uses it in a real project.

If you tell me that your CSS grid framework is “responsive out of the box”, then I’m just going to wonder why your framework is in a box.

https://twitter.com/H9RBSjs/status/375646123798827008

[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:

And here is last week’s issue, too:
http://www.sitepoint.com/forums/showthread.php?1172321-This-Week-in-CSS—October-7-2013

2

Great Links Ralph :slight_smile:

I saw that @H9RBSjs … site last week and it’s very funny - and mostly true :slight_smile: (I added some CSS tips to my [URL=“http://www.pmob.co.uk/temp/fixed-main2.htm”]latest quiz answer also)

In the CSS selectors link it seems that :first-line isn’t working in Firefox. It seems to be confused by “<p>” in this line:


<p class="indent code"><p>Does anybody else feel jealous and aroused and worried?</p></p>

It works on a local test so I guess there’s an issue with the script and that construct.

3

About the border for triangle with CSS. There’s something bugging me.

If I’m using box-sizing: border-box should width and height: 0!important work and nullify the effect or not?

display: table with border-collapse: collapse seem to work and clear the triangle.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>border-box test</title>
 <style type="text/css">
 div {
      -moz-box-sizing: border-box;
       box-sizing: border-box;
       background-color: transparent;
       border: 10px solid transparent;
       border-bottom-color: black;
       width: 0!important;
       height: 0!important;
       display: table;
       border-collapse: collapse;
 }
 </style>
</head>
<body>
<div></div>
</body>
</html>
4

Interesting question and reading from the specs:

border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

I would gather from that the element will always be large enough to hold its padding and borders irrespective of width and height that have been set. It would seem as though the element is still being reduced to a content width example in some ways in that with box-sizing:border-box it works backwards to arrive at the content width. That would seem to make sense with the content width never being negative and thus always able to hold its padding and borders.

Hoewever, I would have assumed, like you, that any padding and borders that were too wide for the element should have just overflowed like normal content.

5

Yes, definitely a gotchas.

6

You know, that’s a lot of reading that I have to do now. I’m glad that I already read the article about CSS regions! But now I have to look at all the rest. Too interesting to miss! :lol:

7

I did the border-box test of myty (#3), and the pivot point seems to be the {display: table;}. With {display: table-cell} everything is fine, just as without mentioning a display property.
According to my logic, I can understand that: a totally empty <table> element of zero width and zero height doesn’t have a border. If you add an empty table cell (of also a 0/0 dimension) in it with the border, the border is there.

  • A {display:table} of an empty element is mimicking an empty <table> element: nothing happens.
  • A {display:table-cell} of an empty element is mimicking an empty <td>: borders are present.

Here is the test: [U]border-box-test.htm[/U]

8

In the list of articles my attention was attracted by the “Chris Coyier’s animated CodePen [U]demo of how to make a triangle in CSS[/U].” - Curious if there were new insights!
Well, it is a wonderful demo, which makes it very easy to understand what is done to get the triangle. The only thing: it is not 100% complete. Probably this demo is used as illustration in a lecture, in which there is more said about the (im)possibilities of this (css2) method. - Anyway, for a stand alone demo I’m missing the considerations about the use, and the css3 alternative.

So I went on with the demo, and made a kind of “demo response” :slight_smile: with the css3 method added, plus some explications.

Here it is: [U]css triangle in two ways[/U]

9

Great demo Francky :slight_smile: (again)

Nicely explained and demonstrated.

A couple of bugs:
I noticed that the link to caniuse is not working and the css3 demo is not working in IE9 although you mention it should work (unless you meant that you need to add the prefixes to your demo). I haven’t had a chance to look under the hood yet but thought I’d just point it out as soon as I saw it.

10

Ha! Bug hunting is welcome: thank you, Paul. :slight_smile:

  • @ link to caniuse is not working
    Of course: always the one and only link I didn’t double check. :wink: –> Repaired.
  • @ demo not working in IE9
    Oops, intended to work; I made a javascript error. *) –> Repaired.

Thanks again.

*) The error to forget that IE-javascript doesn’t follow the guidelines. Normally a hyphen in css has to be in javascript no hyphen but the following letter as Capital:

[INDENT][INDENT]css: element {-webkit-transform: rotate(45deg)}
javascript: element.style.WebkitTransform=“rotate(45deg)”;[/INDENT][/INDENT]

But IE wants the first letter in undercase:

[INDENT][INDENT]css: element {-ms-transform: rotate(45deg)}
javascript: element.style.msTransform=“rotate(45deg)”;[/INDENT][/INDENT]

11

No worries, I know you are good at debugging :wink:

12

Work in progress!
I found there is an IE-filter method to let older IE’s go with the transform property. :inspector:

A stand-alone page to illustrate: [U]css3-transform-triangle.htm[/U] :aparty:
See source code.

Notes:

  • The transform filter does work in IE7 and IE6!
  • IE7 is like the other browsers (only the text in the triangle is not so beautiful).
  • In IE6 the transform for the background (a square to a triangle) is good.
  • In IE6 the hover function is good, if the text stays rotated:
    [CENTER]
    normal -------------------- hover[/CENTER]
  • In IE6, if the text is rotated back to get the text horizontal:
    [INDENT]- is fine in case it is a static figure,
    - but at a hover it gives a strange phenomenon which I could not manage to solve:[/INDENT]
    [CENTER]
    normal -------------------- hover[/CENTER]
  • The reason is that IE6 doesn’t recognize a hover over an element that is not a link. Attaching the bg-color to the link doesn’t help, nor giving the bg-color to the <span> with the text. Could probably be solved with the [U]Whatever:hover[/U] .htc-solution of Peter Nederlof, but that is not pure css! And IE6, should anybody care? :wink:
  • In the demo I’ve chosen for the first option.

I could not test in IE8 (which needs a different IE-filter). Can somebody confirm or deny that it is working in IE8?
I could not test IE9 either, but I assume IE9 is o.k.; confirmative?

13

Hi Franky,

I’ve only got IE tester to check old versions of IE but in IE8 the triangle is not correct. It seems you left off the quotes from the filter as the code below corrects it.

matrix filter converter


<!--[if IE 8]>
	<style type="text/css">
	#triangle {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474,[B] SizingMethod='auto expand')";[/B]}
	</style>
<![endif]-->

IE9 will work if you add the -ms-transform to your rules :slight_smile:


	-ms-transform: rotate(45deg);

IE7 seems to be working according to IEtester.

I don’t check (or care about) IE6 any more :slight_smile:

14

Aha, Thank you. :slight_smile:
It seems I’ve missed some things in copy/pasting from the prior procession of trial&error versions: “[U]it is good to have a second set of eyes[/U]”. :slight_smile:

IE6
After I saw it was working in IE7, I tested IE6 in a real IE6 on a virtual machine, just for curiosity. But I don’t care, though the main thing (rotating a square) is working in IE6 as well.

IE7
I tested in a real IE7: good.

IE8
That’s is strange: I pasted exactly the same [U]IE matrix filter transforms translator[/U] code and did not know that the single quotes magically broke up. Appeared to be an unwanted automatic “correction” of my html-editor as the file was saved. :eek: :eek: :eek:
And now I see I’ve forgotten to add the rotating back filter for IE8.
Well … always surprises with IE! When I corrected/added these things, I could not get the <span> text in the right position.
But IE8 seems to work with the lteIE7 filter as well, if you make some adaptations elsewhere.
Tested in Netrenderer: looks o.k.

IE9
You are right. Happy as I was that IE7 was working, last minute I added the -webkit- prefix, but not the -ms- one. :wink: - Corrected!

IE10
Already good.

Here is the new version: [U]css3-transform-triangle-nw.htm[/U]
Is everything now all right in (real) IE8?

Work in progress! (anyway remaining on the ToDo-list: adapt the article-page / make a stand alone css2 triangle page).

15

Looks fine in IE8 for me :slight_smile:

Weirdly, when first opened in IE8, the triangle’s container was 3px too tall. The bottom corners of the rotated box were showing. (I have a screen shot). When opened the second time and thereafter, it looks great. Who know what evil lurkes in the heart of IE8! :lol:

16

Ha, good news! Thank you for looking. :slight_smile:

… 3px too tall … Who know what evil lurkes in the heart of IE8! :lol:

Reincarnation of [U]The IE6 Three Pixel Text-Jog[/U]? Should make me o so happy! :nanaman:

17

A new list for this week has been posted here: http://www.sitepoint.com/forums/showthread.php?1173899-This-Week-in-CSS�October-21-2013

18

Here’s another article on CSS regions: http://coding.smashingmagazine.com/2013/11/05/killer-responsive-layouts-with-css-regions/