Pixelastic

Imagine the following HTML code :

<div class="wrapper">
[... various HTML elements ...]
	<div class="bar">bar</div>
	<div class="foo">foo</div>
	<div class="bar">bar</div>
	<div class="foo">foo</div>
</div>

How would one style the first div.foo ?

I've tried div.wrapper div.foo:first-of-type but unfortunatly it does not work. In fact the previous rule can be translated into "select the first child of div.wrapper only if it is a div.foo" and not "select the first div.foo inside div.wrapper" as I imagined.

Using jQuery I could do a $('div.wrapper div.foo:first') but there's no such selector in CSS.

If you try the following code in Opera 10.51, you'll have some weird rendering bug :

<style>
	.test:after {
		content:"This should be on red background";
		background:red;
	}
 </style>
 Text input : <input type="text" value="I'm unstyled" class="test" />

The generated content is added to the page, but the background color isn't rendered. Worse, the input lose all styling, it does not have a background color nor borders anymore.

The same effect also apply to every input (radio, checkbox and password).

On a select tag, the generated content correctly have it's background color, but still lose all styling.

On a textarea, the styling is gone too, and the background color is here. Well, sort of, it is actually cropped after a while and the end of the text is on transparent background.

I sent a bug report to Opera about that.

One thing that bugs me everytime I use Opera are the weird keyboard shortcuts. You open link in a new tab by using the middle mouse button (classic) or Shift+click (less classic, we are accustomed to use the Ctrl+Click, Shift+Click being used to open in a new window).

Today it was bugging me one too many times, so I decided to use the power of AutoHotKey to help fix this.

Here is the little snippet I added to my default AutoHotKey script :

;        Open page in new tab in Opera using Ctrl + Click
#ifWinActive, ahk_class OpWindow
^LButton::Send +{LButton}
#IfWinActive

It basically catch every Shift+Click in Opera and return a Ctrl+Click instead, allowing me to finally open tabs the way I'm used to.

I just found (via enure.net) a CSS rule using proprietary Mozilla filter that would allow one to specifically target Mozilla.

I'm not a huge fan of CSS hacks like that, I usually restrain them to the bare minimum of IE conditional comments. But in some edge cases, it is sometimes useful, if you really don't have other options.

I'd like to find the equivalent rules (using proprietary rules, no parser bug) for Safari, Chrome and Opera

@-moz-document url-prefix() { 
	p { color: red; }
}

CSSTidy allows you to optimize your CSS files by aggregating them in one unique file, removing useless spaces and comments as well as running some other optimizations on multiple declarations and shorthand notations.

But if, like me, you're still using the 1.3 version available on the official website, you may have run into issues when dealing with the latest CSS3 goodies.

I've been hacking this library in the last year, adding support for @font-face and for proprietary prefixed properties values, but today I was faced with some other issues that I wasn't able to resolve.

CSSTidy does not use regexp to parse the file, it reads it one char at a time and does its optimization at the same time, and it is sometimes quite hard to follow.

Anyway, I just discovered that the Sourceforge page of the project is still up and running and that a commit was added today, so the project is not dead ! I also posted two bug reports and one (dummy) patch.

Here's the link, you got a download link at the bottom : http://csstidy.svn.sourceforge.net/viewvc/csstidy/trunk/

I just ran into a strange behavior on Safari 3 (Win). I'm not quite sure what caused this problem, but I tracked it down to one CSS rule.

The thing was that I had an input field that moved whenever I tried to focus it. It jump 3 pixels up whenever I gave him focus. I had never seen that before.

I finally managed to track it down to the padding:2px 0px 5px 0px; declaration. I exploded it in four (-top, -right, -bottom and -left) and it seemed that it was the padding-bottom:0px that cause the bug.

I finally rewrote my css (in three lines instead of one) and moved to other things.

I post it here as a reminder, and hope it could help someone.

Ah elles en ont du caractère ces polices ! Elle m'en font voir de toutes les couleurs...

Pour l'intégration sur laquelle je travaille, certains titres utilisent une police spéciale, et pour intégrer ça grâce ) @font-face et Cufon, il me faut les fichiers de police sous différents formats.

La graphiste m'a fournie la police, sous format .dfont (package de plusieurs font à la sauce Mac). J'ai pu extraire le package grâce à DFontSplitter, ce qui m'a donné plein de polices .ttf.

Corrompues, d'ailleurs, qu'il m'a fallu réparer grâce à CrossFont (attention shareware de 15 jours). Sauf qu'il me convertit les fichiers en .otf.

Pas de soucis pour Firefox, Safari et Opera qui comprennent ce format très bien, mais pour IE, je dois convertir ça en .eot (grâce ce converter en ligne).

Qui ne prends malheureusement que des .ttf comme source... Impossible de trouver un converter otf => ttf sous windows qui ne demande pas d'installer des tas de choses, je suis donc passé sous mon Ubuntu, ai téléchargé FontForge : Open => Generate Font => ttf et voila

Edit : Et hop, un autre converter en ligne de plus (otf, ttf, dfont)