Because the integrated bugreport-tool in Chrome won’t support to attach a different screenshot and because the website I’m working on is not yet released – and because I’m currently to lazy to build a HTML-demo – I present a rendering-bug for the -webkit-radial-gradient that seems to be MacOS X only:

The relevant part of the style-sheet:

.addonContent:before {
content:”\0000a0″;
display:block; position: absolute;
top:0; left:-1px;
width: 4px; height:100%;

background-image:-webkit-radial-gradient(left center, ellipse farthest-side, rgba(0, 0, 0, 0.5), transparent);
}

On Windows 7 it looks right:

On MacOS X (10.6.8) it looks like this:

And if I replace “height” with a fixed number like 36px, then it won’t change – it still looks bad on MacOS X.

If you, like me, have one installation of Magento where there is no package “Mage_All_Latest” in the connect manager, then use this URL for the extension key:

http://connect20.magentocommerce.com/community/Mage_All_Latest

One and a half years since the last version and since I touched the code.

The new version is now on GitHub and contains some significant improvements. The support for jQuery 1.3.x is now dropped in favor of the .delay()-function.

Check it out on GitHub.

Wer so wie ich viel mit jQuery macht, der nutzt sicher auch jQueryUI.

Zugegebenermaßen ist jQueryUI nicht “die beste Lösung” – an manchen Stellen ist das ganze Paket schon etwas krude. Aber die typischen Dinge lassen sich mit relativ wenig Aufwand umsetzen.

Aber dann gibt es doch Limits bei denen man sich einen leichteren Zugang zur API wünschen würde. Seit geraumer Zeit versuche ich das zu umgehen indem ich mich auf Addon-Suche für jQueryUI mache. Über die Addons mit denen ich absolut unzufrieden war, will ich hier gar nicht schreiben.
Seit einiger Zeit nutze ich diese timepicker-Erweiterung für den jQueryUI-datepicker. Mit 28kb (uncompressed) ist er zwar einigermaßen gross, aber die letzten drei Upgrades von jQueryUI hat er unbeschadet überstanden – und das ist hoch anzurechnen.

Ich hatte auch einige andere Alternativen ausprobiert, aber keine war so gut eingebunden wie diese.
Wer hat denn noch gute Erfahrungen mit jQueryUI-Addons?

Zwar wird der Wechsel von CSS 2 auf CSS 3 bekanntermaßen wohl noch etwas dauern. Aber eine hilfreiche Neuerung ist das CSS3-Modul “multi-column layout”. Auch wenn es nicht mehr wirklich “taufrisch” ist, möchte ich es trotzdem kurz vorstellen. Denn wenn die Seite nicht in allen Browsern gleich aussehen muß, spart man sich dadurch verschachtelte divs – von tables gar nicht zu reden…
Geeignete Anwendungen wären, Listenaufzählungen, Navigationslisten aber auch Textebereiche.

Beispiel:

Code für Mozilla-Browser:
#TopNav ul{
-moz-column-count: 3;
-moz-column-width: 32%;
-moz-column-gap: 1em;
-moz-column-rule: solid #818285 1px;}

Über column-count wird die Spaltenanzahl definiert.

Column-width bestimmt die jeweilige Spaltenbreite. Derzeit sind alle Spalten immer gleich breit & hoch. (Das kann sich zukünftig ggf. noch ändern.)

Column-gap regelt den horizontalen Abstand zwischen den einzelnen Spalten. Der Wert darf nicht negativ sein.

Mit column-rule kann eine Trennlinie definiert werden.

Bitte nicht vergessen, für Safari-Browser wird statt “-moz” einfach “-webkit” definiert.

Umbrüche:

Um Umbrüche in die nächste Spalte gezielt zu steuern, stehen folgende Eigenschaften zur Verfügung:

• break-before
• break-after
• break-inside

Versucht Umbrüche innerhalb von p Elementen zu  vermeiden:
p { break-inside: avoid-column }

Umbruch nach Bildern:
img { break-after: column }

Umbruch vor h2:
{ break-before: column; }

Weitere Möglichkeiten:

Element über alle Spalten darstellen:
h2 { colum-span: all;}

Wer noch tiefer einsteigen möchte, dem empfehle ich dazu die Seite des W3C:
http://www.w3.org/TR/css3-multicol/

Browser Kompatibilität:

mac:

• Chrome  5
• Firefox 3.6
• Safari 4

Win:

• Chrome 4
• Firefox 3, 3.6
• Safari 4

Bisher keine Unterstützung:

• IE 6,7 und 8
• Opera 10, 10.1 und 10.5