Verbesserte Suche in Chromes Omnibar einschalten

Wer wie in Firefox gern verschiedene Suchwörter eintippt, um dann auf die richtige URL zu kommen, der ist bei Chrome schwer enttäuscht, dass das bisher nicht ging. Eine Suche wie "frame zend man de" zeigt zum Beispiel auf die de-Seite des Zend Frameworks, ähnliche Suchen führe ich täglich mehrere dutzend mal durch; "da war doch letztens so eine Seite, da ging es um x und y und irgendwas mit z ... aha, eintrag 3".

Das geht aber auch mit Chrome und zwar so (danke an @skaverat für den Tip):

• Chrome 11 öffnen; ggf. vorher updaten
• about:flags eingeben
• ziemlich weit unten "Besseren Abgleich mit dem Omnibox-Verlauf ermöglichen" aktivieren
• Chrome neu starten
• keywords wie in Firefox eingeben

Nun fehlt mir nur noch ein nativer Firebug in Chrome und ich schmeiße Firefox weit weg ;)

Wer wie in Firefox gern verschiedene Suchwörter eintippt, um dann auf die richtige URL zu kommen, der ist bei Chrome schwer enttäuscht, dass das bisher nicht ging. Eine Suche wie "frame zend man de" zeigt zum Beispiel auf die de-Seite des Zend Frameworks, ähnliche Suchen führe ich täglich mehrere dutzend mal durch; "da war doch letztens so eine Seite, da ging es um x und y und irgendwas mit z ... aha, eintrag 3".

Das geht aber auch mit Chrome und zwar so (danke an @skaverat für den Tip):

• Chrome 11 öffnen; ggf. vorher updaten
• about:flags eingeben
• ziemlich weit unten "Besseren Abgleich mit dem Omnibox-Verlauf ermöglichen" aktivieren
• Chrome neu starten
• keywords wie in Firefox eingeben

Nun fehlt mir nur noch ein nativer Firebug in Chrome und ich schmeiße Firefox weit weg ;)

Verbesserte Suche in Chromes Omnibar einschalten

Runde Ecken mit CSS…

… sind ja heute kein Problem mehr.

Einfach ein

border-radius: 6px;

in das Stylesheet des Div’s und man hat rundherum runde Ecken.

Allerdings sollte man aufpassen, wie dick die Ecken sind.

Bei sowas hier geht es schief:

border: 2px solid #E0E8F4;
border-left-width: 51px;
border-radius: 6px;

Kurz erklärt: 2 Pixel Rand rundherum, nur links 51 Pixel, dann die Ecken 6 Pixel abrunden, fertig.
An und für sich eine einfache Sache, denkt man.

Hier mal Bilder der Browser:

Firefox 4:

Internet Explorer 9:

Bis hierhin kein Problem, IE9 und Firefox machen alles “richtig”, aber nun:

Chrome 10:

Man erkennt, dass oben und unten jeweils ein kleiner Teil fehlt.
Der Knaller ist aber Opera 11 (verlinkt auf größeres Bild, da kann man es besser sehen):

Man kann erkennen, dass Opera da irgendeinen “Bogen” nach unten rendert.

Ursache ist wohl die unterschiedliche Dicke der Rahmen und dazu noch die border-radius Eigenschaft, die da wohl Probleme machen.

Vergrößert man den radius-Wert, kann man das ganze auch besser erkennen (hier 18px):

Die beiden Ecken auf der rechten Seite sind immer in Ordnung, einzig die webkit-Browser und Opera machen ein “Problem”.

Meine Frage nun an euch: Wie behebe ich das? Hat dazu jemand einen Vorschlag?

… sind ja heute kein Problem mehr.

Einfach ein

border-radius: 6px;

in das Stylesheet des Div’s und man hat rundherum runde Ecken.

Allerdings sollte man aufpassen, wie dick die Ecken sind.

Bei sowas hier geht es schief:

border: 2px solid #E0E8F4;
border-left-width: 51px;
border-radius: 6px;

Kurz erklärt: 2 Pixel Rand rundherum, nur links 51 Pixel, dann die Ecken 6 Pixel abrunden, fertig.
An und für sich eine einfache Sache, denkt man.

Hier mal Bilder der Browser:

Firefox 4:

Internet Explorer 9:

Bis hierhin kein Problem, IE9 und Firefox machen alles “richtig”, aber nun:

Chrome 10:

Man erkennt, dass oben und unten jeweils ein kleiner Teil fehlt.
Der Knaller ist aber Opera 11 (verlinkt auf größeres Bild, da kann man es besser sehen):

Man kann erkennen, dass Opera da irgendeinen “Bogen” nach unten rendert.

Ursache ist wohl die unterschiedliche Dicke der Rahmen und dazu noch die border-radius Eigenschaft, die da wohl Probleme machen.

Vergrößert man den radius-Wert, kann man das ganze auch besser erkennen (hier 18px):

Die beiden Ecken auf der rechten Seite sind immer in Ordnung, einzig die webkit-Browser und Opera machen ein “Problem”.

Meine Frage nun an euch: Wie behebe ich das? Hat dazu jemand einen Vorschlag?

Runde Ecken mit CSS…