Marcus Nyberg » css http://www.marcusnyberg.com Digital and dangerous Mon, 26 Jul 2010 11:00:16 +0000 en hourly 1 http://wordpress.org/?v=3.0 Sluta använda Internet Explorer 6 http://www.marcusnyberg.com/2009/11/02/sluta-anvanda-internet-explorer-6/ http://www.marcusnyberg.com/2009/11/02/sluta-anvanda-internet-explorer-6/#comments Mon, 02 Nov 2009 16:04:00 +0000 admin http://www.marcusnyberg.com/?p=305 Något som börjar bli uppmärksammat i webbvärlden är kampanjen mot Microsofts webbläsare IE6 (Internet Explorer 6). Läs mer på http://ie6.forteller.net. Denna webbläsare har nu varit med i 8 långsamma år och hållit tillbaka webbens utveckling sedan första dagen. Jag kan bara instämma i detta och kommer att göra allt i min makt för att få folk att sluta använda webbläsaren från helvetet.

Jag har gjort en egen lösning för detta i php+css+html som gör att mina sidor ser ut enligt screenshoten nedan. Tanken är att imitera actionbaren som finns i IE6 och be användaren att uppdatera sin webbläsare om denne kör IE6. Lösningen är en blandning av flera andra lösningar.

Screenshot
sluta-anvanda-ie6

php
// Vilken webbläsare kör användaren
$browser = substr($_SERVER['HTTP_USER_AGENT'], 25, 8);

// Kolla om IE6
$ie6 = ($browser == "MSIE 6.0");

// Om IE6, visa actionbar
if(!$ie6) { include "actionbar.html"; }

CSS
div.activebar
{
position: absolute;
background-color: #ffffe1;
border-bottom: 1px solid #c8c8c8;
margin:0;
padding:0;
width:100%;
}

div.activebarText
{
font-family: sans-serif;
font-size: 12px;
margin-left: 6px;
margin-top: 4px;
height: 100%;
}

actionbar.html
<div class="activebar">
<div class="activebarText" align="center">
Din webbläsare är gammal och osäker! För att få ut det mesta av vår webbsida så rekommenderar vi att ni <a href="http://www.microsoft.com/ie" target="_blank">uppgraderar</a> den.
Pröva även andra populära webbläsare som <a href="http://www.mozilla.com/sv-SE/" target="_blank">Firefox</a>, <a href="http://www.opera.com/" target="_blank">Opera</a>, <a href="http://www.google.com/chrome/" target="_blank">Chrome</a> eller <a href="http://www.apple.com/se/safari/" target="_blank">Safari</a>.
</div>
</div>

]]> http://www.marcusnyberg.com/2009/11/02/sluta-anvanda-internet-explorer-6/feed/ 0 Gömma delar av sidan vid utskrift med CSS http://www.marcusnyberg.com/2007/06/27/gomma-delar-av-sidan-vid-utskrift/ http://www.marcusnyberg.com/2007/06/27/gomma-delar-av-sidan-vid-utskrift/#comments Wed, 27 Jun 2007 06:33:39 +0000 marcus http://www.marcusnyberg.com/2007/06/27/gomma-delar-av-sidan-vid-utskrift/ Idag ställdes jag inför en liten men delikat uppgift. På en webbsida där det finns en ”skriv ut” knapp så skall denna knapp gömmas då man skriver ut sidan. Efter en stunds funderande så hade jag en krånglig lösning i huvudet och bestämde mig för att googla efter en bättre lösning. Och som vanligt så har någon haft samma problem.

Det jag inte visste var att det i CSS-2 finns direktiv för hur man lägger till olika stilar (styles) för en sida beroende på vilket medium som används för att titta på den. Så man kan alltså enkelt ha olika stilar för en bunt olika mediatyper. Läs mer om CSS och mediatyper. I mitt fall så var det print-mediatypen den som löste problemet.

Enkelt exempel nedan:

<HTML>
<HEAD>
<STYLE type=”text/css”>

@media print {
.printOnly {display:block;}
.screenOnly {display:none;}
}

@media screen {
.screenOnly {display:block;}
.printOnly {display:none;}
}
</STYLE>
</HEAD>
<BODY>
Sidans innehåll som visas på både skärm samt då sidan skrivs ut
<div class=”screenOnly”>På skärmen enbart, ||min-knapp||</div>
<div class=”printOnly”>På utskriften enbart</div>
</BODY>
</HTML>

]]> http://www.marcusnyberg.com/2007/06/27/gomma-delar-av-sidan-vid-utskrift/feed/ 2