Einfaches und kostenloses Cookie Plugin für die EU Cookie Richtlinie

Auf der Suche nach einer einfachen Möglichkeit ein Cookie Plugin für die neuen EU Cookie Richtlinien einzubinden, bin ich auf die Firma Silktide Ltd. gestoßen, welche auf ihrer Website eine wirklich kinderleichte und kostenfreie Open Source Möglichkeit anbietet ein solches Plugin auf eurer Website zu integrieren.

Dazu bietet Silktide Ltd. sogar ein Tool an, mit Hilfe dessen ihr die Platzierung des Hinweises auf eurer Seite konfigurieren könnt (Einblendung unten, oben, etc), sowie den Anzeigetext des Cookie Nutzungshinweises direkt anpassen könnt, ohne dabei mit Code in Kontakt zu kommen.

Am Ende erhaltet ihr dann eueren fertig konfigurierten Code, den ihr nun nur kopieren und vor dem schließenden </head>-Tag einfügen. Der ganze Prozess ist eigentlich denkbar einfach und selbsterklärend.

Mehr Infos unter: https://silktide.com/tools/cookie-consent/

Horizontales scrollen beim Einsatz von hint.css bei mobiler Darstellung

Beim Einsatz von hint.css hatte ich ein Problem bei der Darstellung einer Website auf mobilen Geräten. Plötzlich konnte ich in der mobilen Darstellung horizontal scrollen und hatte rechts einen weißen Rand. Nach einigen Tests bin ich darauf gekommen, dass mein eingesetztes CSS-Framework hint.css für Tooltips dafür verantwortlich ist, da diese besagten Platz einnehmen und quasi über die Seite „hinaushängen“. Da die Tooltips für die mobile Darstellung nicht gedacht waren, wollte ich diese ohnehin deaktivieren. Es gelang mir das Problem durch folgende CSS Anweisung zu beheben (ausblenden der Tooltips):

*[data-hint]:before, *[data-hint]:after {
 display: none !important;
}

Diese Anweisung ist in eine entsprechende Media Query für mobile Geräte zu setzen.

Bootstrap verzerrt Google Maps Controls / UI Elemente

In Verbindung mit Bootstrap wollte ich in eine Website Google Maps mit einem API Key integrieren. Darauf sah ich,… erstmal kaum etwas. Das Overlay meiner Karte blieb einfach nur grau und die UI Elemente waren verzerrt / verschwommen / unscharf.

map-distorted

Das Problem dabei besteht darin, dass Bootstrap die max-width von Bildern auf 100% setzt.
Ich löste dieses Problem, indem ich den Map Wrapper, in dem ich mein Kartenmaterial angezeigt bekomme wiefolgt setze:

#map {
max-width: none;
}

Das Ergebnis war dann genau so, wie ich es ursprünglich wollte.

map-sharp

Internet Explorer 11 & CSS: rgba und border-radius funktionieren nicht

Ich hatte nun schon einige Male das Problem, dass in Internet Explorer 11 der border-radius und auch die Opacity des rgba-Attributs nicht funktioniert haben. Dabei stellte sich heraus, dass der IE 11 im IE 8 Rendering Mode war. Da ihr ein derartiges Verhalten bei euren Usern nicht überprüfen könnt, empfiehlt es sich folgendes im head-Bereich eurer Seite mit aufzunehmen:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Oder:

<meta http-equiv="x-ua-compatible" content="IE=edge" />

Bei IE=edge verwendet der Internet Explorer die höchste verfügbare Version um zu rendern. Also verwendet ihr IE9 dann rendert er es in IE9, bei IE11 auch in der Version 11.

Passt aber auf, dass nicht noch etwas wie unten zusätzlich im Dokument steht – also kein IE=8:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Darauf gekommen bin ich, als ich bemerkte, dass border-radius und rgba-Hintergründe auf anderen Seiten funktionierten und bei einer meiner Seiten diese Attribute rot unterringelt in den Developer Tools von Chrome angezeigt wurden. Falls das bei euch ähnlich sein sollte, versucht den obigen Lösungsvorschlag mal.

HTML Inline Style überschreiben / override

Wenn ihr in HTML einen inline Style für ein Element definiert habt und diesen Style nicht oder nur schwer ändern könnt, könnt ihr diesen recht einfach überschreiben. Als Ausgangslage liegt euch zum Beispiel folgendes vor:

<div class="box" style="background: white">
</div>

Für einen Override des inline Styles legt ihr folgendes in eurem Stylesheet an:

.box[style] {
  background: blue !important;
}

Für mich selbst hat diese Methode bisher immer ganz gut funktioniert.

Toggled Box mit HTML5 (aufklappbare Box)

Mit HTML5 werden zwei neue Tags eingeführt, mit denen Ihr eine Box mit toggle-Effekt erstellen könnt. Es handelt sich dabei um Inhalt, der erst angezeigt wird sobald ihr auf eine Überschrift oder (wie es bisher in Google Chrome realisiert ist) auf einen kleinen Pfeil klickt.


<details>
<summary>Here is some more text!</summary>
<p>Some more text for you to show. blablablablablabla....</p>
</details>

Wie gesagt, stand heute (19.01.2012) unterstützen das nur die wenigsten Browser. Ich habe es mit Chrome und Safari getestet. Chrome besitzt für <details></details> bereits eine Implementierung, Safari noch nicht.