webbear.ch - bärenstarkes webdesign Bern

LESS

2012-04-15T13:51:01+00:00

Wer viel CSS schreibt, wie ich, der soll sich unbedingt mit SASS oder LESS beschäftigen. Während SASS vor allem in der ruby Welt angewendet (mit dem Mac ist ruby sowieso schon vorinstalliert), ist LESS ‘universaler’. Es gibt php LESS Compiler, auch dotless für .net sowie Javascript Lösungen.
Noch besser ist meiner Meinung nach, mit Codekit LESS lokal zu compilieren und danach nur nach das CSS hochzuladen.
Die lokale Entwicklung ist damit fast doppelt so schnell. Die verschieden Browser-Hersteller Prefixe zum Beispiel, können mit mixins vordefiniert werden.
Ebenfalls super ist die Möglichkeit, Variablen zu definieren!

Links:
LESS
SASS
Codekit

HTML5 und Meta X-UA compatible

2012-03-05T16:33:17+00:00

Mit IE8 führte MS den Meta Tag ein, um den IE8 mit der Rendering Engine des IE7 laufen zu lassen. Im Moment ist es jedoch nicht möglich, eine HTML5 Seite mit diesem Meta Tag zu valideren. In HTML5 Boilerplate wird zum Beispiel verwendet, mit dem Hinweis, dies besser Server seitig auszugeben.
Nun, “edge” begreife ich definitiv nicht. Dann kann der Tag ganz weggelassen werden, edge würde ja bedeuten, dass jeder IE in seiner neuest möglichen Engine rendert. Das Chrome Frame macht schon einen gewissen Sinn. Edge bedeutet für mich aber viel Risiko, wir kennen ja die IE8 “Qualitäten” beim nur schon beim rendern von CSS 2.1.
Dann würde ich eher den Meta Tag bevorzugen.
Weiterführende Links zu diesem Thema:
http://www.alistapart.com/articles/beyonddoctype
http://stackoverflow.com/questions/6665312/w3c-markup-validator-html5-meta-problem
http://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/

box-shadow auch in IE 6-8 ohne JS

2012-02-15T16:13:16+00:00

Useragentman zeigt in seinem Blogeintrag, wie box-shadow auch in den Versionen 6-8 des Internet Explorers erstellt werden kann.
Guter Lösungsvorschlag!
http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Einzig würde ich die Reihenfolge hier andern:

/* CSS3 Box-shadow code: */ box-shadow: 5px 5px 0px #ff0000; -webkit-box-shadow: 5px 5px 0px #ff0000; -moz-box-shadow: 5px 5px 0px #ff0000;

/* CSS3 Box-shadow code: */ -webkit-box-shadow: 5px 5px 0px #ff0000; -moz-box-shadow: 5px 5px 0px #ff0000; box-shadow: 5px 5px 0px #ff0000;

Dropdownlist im Firefox

2012-01-21T10:27:24+00:00

Dropdownlist funktionierte nicht mehr im Firefox. In anderen Browser jedoch schon.
Lösung: auf dem umfassenden Div (label und select) war ein self clearing drauf :

div.Dropdonlist:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Das geht nicht mit dem Firefox, zumindest nicht mit dem 9er.
Nachdem Entfernen des self clearing funktioniert das select wieder.

Responsive Web Design

2011-10-18T16:01:50+00:00

Empfehlenswerte Literatur über Responisve Web Design von Ethan Marcotte.
Auf a list apart und als Buch

Youtube Video überdeckt Flyout Menu (Chrome und IE)

2011-06-28T15:59:37+00:00

In Chrome und in IE werden die Flyout (oder Dropdown) Menus vom eingebetteten Youtube Video überdeckt.

Nach diesem Thread ( http://www.google.com/support/forum/p/Chrome/thread?tid=314ebf3e9e1902b6&hl=en ) habe ich beim eingebettetem Video folgenden Code eingefügt:

und in

noch wmode="opaque"



	Dies hat im Chrome und im IE geholfen.



Zur Erinnerung
2011-05-26T06:33:31+00:00
Chris Seal at design festiva: Better Semantics with CSS Combinators & Selectors

	http://designfestival.com/better-semantics-with-css-combinators-and-selectors/


Print Layout wird verkleinert
2011-04-07T07:54:16+00:00
Ausgangspunkt: Das Print Layout wurde bei identischem Print.css verschieden gross ausgegeben. Also nicht nur der Text bekam unterschiedliche Grössen, sondern auch die Bilder (bzw vor allem das als Bilddatei geladene Logo)

	Abklärungen

Quelltext valid, CSS valid, Javascript iO

	Lösung: 

Es wurde eine URL als Quelle generiert und je nach Pfadlänge konnte diese natürlich nicht umbrechen und hat damit die ganze Ausgabegrösse beeinflusst. Entweder diese Angabe wird ausgeblendet, was wenig Sinn macht, oder das umschliessende Element wird mit einem overflow: hidden; versehen. Ein word-break gibt es (leider?) nicht …


z-index in automatisch generiertem Formular
2011-03-23T05:27:44+00:00
Ausgangslage:



	Im IE fällt der Hilfe span unter das nächste Element, welches position relative hat. Es nützt nichts, dem .Help span einen z-index von 1 zu verpassen (in allen andern Browser reicht das).

Da das Formular generiert wird und nicht von ‘Hand’ programmiert wird, soll die Lösung möglichst auch ‘generiert’ sein.

	Lösung:

Mit jQuery das Elternelement des .Help spans suchen und bei hover eine Klasse vergeben, die dann mit position: relative; und z-index: 1; im CSS versehen werden kann. Es ist damit auch kein zusätzlicher Quelltext nötig.



	Resultat:



	Alternativ, ohne jQuery;

	
onmouseover="document.getElementById('myId1').style.visibility
 = 'visible';document.getElementById(myId1').parentNode.style.zIndex ='1';"


	
onmouseout="document.getElementById('myId1').style.visibility 
= 'hidden';document.getElementById('myId1').parentNode.style.zIndex ='auto';"


	Wobei IE6 mit zIndex=‘auto’ Probleme hat und es besser mit zIndex=’‘ eingegeben wird (oder: .parentNode.style.removeProperty(‘zIndex’); -> nicht getestet!)


position fixed
2010-10-19T21:47:59+00:00
Element (div.Skyscraper) im Header muss an Container entlang fliessen, Element wird dynamisch (JS) mit Inhalt gefüllt (div#google_ads_div_Skyscraper)

	#PrimaryHeader div.Skyscraper {
position: absolute;
right: -168px;
top:-118px;
float: left;
width: 168px;
z-index: 6000;
}

	#PrimaryHeader div.Skyscraper a {
display: block;
position: fixed;
}

	/*diese Definition funktioniert in allen Browser ausser IE*/
/*div#google_ads_div_Skyscraper {
position: fixed;
float:left;
width:165px;
z-index: 300;
}*/