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.

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

I saw that [@H9RBSjs ... site last week and it's very funny - and mostly true (I added some CSS tips to my [URL="http://www.pmob.co.uk/temp/fixed-main2.htm"]latest quiz answer](https://twitter.com/H9RBSjs) 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:

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

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.

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.

In the list of articles my attention was attracted by the "Chris Coyier's animated CodePen demo of how to make a triangle in CSS." - 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" with the css3 method added, plus some explications.

So I went on with the demo, and made a kind of "demo response" with the css3 method added, plus some explications.Here it is: css triangle in two ways

Great demo Francky (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.

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:

In IE6, if the text is rotated back to get the text horizontal:

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 Whatever:hover .htc-solution of Peter Nederlof, but that is not pure css! And IE6, should anybody care?

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?

IE6After 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.

IE7I tested in a real IE7: good.

IE8That's is strange: I pasted exactly the same IE matrix filter transforms translator 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.

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

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: