CSS Word-wrap

Hvis man skal være sikker på at word-wrap virker i alle browsere kan man med fordel benytte følgende CSS

<style> 
.divToWordWrap {
    -ms-word-break: break-all;
    word-break: break-all;

    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

    width:400px;
</style>

HTML5 og CSS3

Hvad understøttes af hvilke browsere. Det kan være svært at finde ud af.

Her er to gode links, der giver et hurtigt overblik:
HTML5 & CSS3 Readiness
When can I use...

Hardboiled Web Design

Har gennem de sidste par nætter slugt siderne i Hardboiled Web Design af Andy Clarke.
Fantastisk bog, hvis man skal i gang med HTML5 og CSS3, specielt fordi den tager browser-problemerne seriøst.

Der er CSS-exempler til Firefox, Chrome, Safari og Explorer både for PC og Mac. Og da der er så stor forskel på hvordan fx. Firefox viser text på PC og Mac er bogen glimrende som opslagsværk efterfølgende. En god julegaveidé.

Og det er nu engang stadig rarere at læse i bog end at google :-)

jQuery pop-up

Her er et rigtig godt script til at lave CSS-popups.

<title>Test Document</title>
<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='http://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>
  <a href='javascript: void(0);' onclick="$('#my_hidden_div_id_1').koverlay({title: 'OVERSKRIFT HER'});$('.css_koverlay').css({'background-color':'#9c183a'});">Link Text</a>
  <div id="my_hidden_div_id_1" style="display: none;">INDHOLD HER...</div>
</body>
</html>

http://flowplayer.org/tools/demos/overlay/index.html

CSS popup centreret

Faldt lige over dette script. Eneste problem er at man ikke kan anvende billeder i pop-up'en, da den ligger inden i #displaybox. Har prøvet mig lidt frem, men kan ikke få vist billeder som baggrund i pop-up'en.

<head>
<style>
#displaybox {
   z-index: 10000;
   filter: alpha(opacity=50); /*older IE*/
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
   -moz-opacity: .50; /*older Mozilla*/
   -khtml-opacity: 0.5; /*older Safari*/
   opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
   background-color:#000000;
   position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

<script>
function clicker(){
   var thediv=document.getElementById('displaybox');
   if(thediv.style.display == "none"){
      thediv.style.display = "";
      thediv.innerHTML = "TEXTEN<a href='#' onclick='return clicker();'>LUK</a>";
   }else{
      thediv.style.display = "none";
      thediv.innerHTML = '';
   }
return false;
}
</script>

<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>ÅBEN VINDUE</a>
</body>

Brug egne skrifter på dine Websites 2

Her er en stump CSS, der viser koderne til alle font-typerne.

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('../DroidSerif-Regular-webfont.eot');
    src: url('../DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../DroidSerif-Regular-webfont.woff') format('woff'),
         url('../DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('../DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body, p { 
  font-family: 'DroidSerifRegular', Verdana, Tahoma;
}

<p >Hello world!</p>

Brug egne skrifter på dine Websites

Et forsøg på at ændre skrifttyper på en hjemmeside. Det virker fint i Firefox og Chrome, men ikke i Explorer.

<style type="text/css">
  @font-face {
  font-family: "My Custom Font";
  src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
  font-family: "My Custom Font", Verdana, Tahoma;
}
</style>

<p class="customfont">Hello world!</p>

For understøttelse i IE, skal fonten konverteres til EOT-formatet. Jeg har fundet et glimrende online værktøj til at generere stylesheet'et og font'ne.  Med @font-face Generator kan du uploade dine fonte og automatisk få genereret stylesheet og web-formater af fonten.

Bemærk: At fonten SKAL ligge i samme mappen som den side den skal vises på, ellers virker det ikke

Et hurtigt eksempel kan ses her!