Post on 20-Jul-2020
F10 – Mer CSS
Dagens agenda
• Stila formulär
• CSS-genererat innehåll
• Mediatyper
• Utskrift
• Negativa marginaler
• Sprites
• Gridbaserade layouter
• Ramverk
Formulär
<br />
Prydliga formulär
#cform { width: 500px;}
#cform label {
width:140px;
text-align:right;
display:block;
float:left;
padding-right:10px;
clear:left;
}
#cform input, #cform textarea, #cform select
{
width:300px;
margin-bottom:20px;
}
#cform textarea { height:100px; }
#cform .checkbox { width:auto; }
CSS-genererat innehåll Vi har möjlighet att lägga till innehåll till vårt HTML-dokument med CSS. (Obs!
Hamnar inte i DOM)
#mainnav li:after {
content: "…";
}
#divtwo:before {
content:"";
height:5px;
width:5px;
background:red;
}
content: url(pin.png);
Stöds först från och
med IE8
CSS-genererat innehåll
http://nicolasgallagher.com/pure-css-gui-icons/demo/#non
http://css-tricks.com/9516-pseudo-element-roundup/
Media
Mediatyper
<body>
<head>
<link rel="stylesheet" media="print" href="print.css" />
<title>Våra produkter</title>
</head>
…
Stilmallen "print.css" kommer bara att laddas då dokumentet skrivs ut.
Vi har bland andra tillgång till:
all, handheld, print, projection, speech, tv, screen
default
Flera mediatyper samtidigt
<body>
<head>
<link rel="stylesheet" href="basic.css" />
<link rel="stylesheet" media="screen" href="screen.css" />
<link rel="stylesheet" media="print" href="print.css" />
…
</head>
…
Alla enheter
Vid utskrift kommer nu basic.css att
användas tillsammans med print.css
Användare vid en vanlig skärm kommer
att få basic.css att användas
tillsammans med screen.css
?
@media-direktivet <body>
<head>
<link rel="stylesheet" href="basic.css" />
…
</head>
…
p {
color: red;
}
#content {
float:left;
}
@media print
p {
color:black;
}
@media screen
…
@media print
…
@media handheld
…
Tänk på vid utskrift
http://alistapart.com
#mainnav {
display: none;
}
…
Länkar och utskrift
Hur göra med länkar vid utskrift?
@media print
#content a:after {
content: " (" attr(href) ")";
}
Marginaler
margin:5px 10px 30px 10px;
alternativt:
margin-top:5px;
margin-right:10px
margin-bottom:30px;
margin-left:10px;
Negativa marginaler margin-right:-10px;
margin-left:-10px;
margin-bottom:-10px;
margin-top:-10px;
Layout med CSS, del 2 body
div #container
• start • sida 1
div #wrapper
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum mi quis ligula pretium sed rutrum tortor posuere. Vivamus aliquet velit a mauris vestibulum commodo. Etiam cursus suscipit lorem, vel mattis metus facilisis ac. Proin gravida lacinia aliquet. Mauris arcu sem, tempor id gravida quis, lacinia non mauris. Etiam ac ante ligula, a tincidunt odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tristique euismod ipsum, mattis venenatis odio condimentum ac.
div #content
div #sidebar
div #footer
div #top
div #navigation
Layouter med CSS – en bra grund
Exempel på klassiska layouter
Negativa marginaler
Problem:
ordningen i HTML-
koden
<div id="wrapper">
<div id="content">
<p>…</p>
</div>
</div>
+
negativa marginaler
Lösning:
Lösningen 1
float:left
width:150px
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
Lösningen 2
float:left
width:150px
margin-right:-150px
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
Lösningen 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-left:150px;
float:left
width:150px
margin-right:-150px
Lösningen 4
width:160px;
float:right;
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-left:150px;
float:left
width:150px
margin-right:-150px
Lösningen 5
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-left:150px;
margin-right:160px;
float:left
width:150px
margin-right:-150px
width:160px;
float:right;
Lösningen 6
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-right:-180px
margin-left:150px;
margin-right:160px;
float:left
width:150px
margin-right:-150px
width:160px;
float:right;
Lösningen 7
Navigation
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
Sidebar
Se demo
#7
Lösningen 7
Navigation
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
Sidebar
Se demo
#7
min/max width/height
Stöds först från och
med IE7
egenskaper
min-width
min-height
max-height
min-height
min-width max-width
#container {
max-width: 1480px;
min-width: 960px;
}
Sprites
CSS Sprites
CSS Sprites socialsprite.png
#fbIcon #fbIcon:hover
Se demo
CSS Sprites
Fördelar
• Minskad totalstorlek på bilder
• Färre HTTP-anrop till servern
• Färre HTTP-anrop från klienten
• Vi riskerar inte ”flickering” • Ovana utvecklare riskerar att lägga bilder som
hör hemma i HTML-koden som CSS Sprites.
• Jobbigare att underhålla stora CSS Sprites
• Kan bli jobbigare CSS att koda.
Nackdelar
Gridbaserade layouter Bygger på att man försöker arbeta
med kolumner i multipler om 3
eller 4.
Fokuserar på kolumner, men rader
kan användas i viss utsträckning
Ger ett proffsigare intryck och ofta
per automatik en snyggare och
behagligare sida att titta på.
Bygger på kolumner med
marginaler.
Gridbaserade layouter
Ramverk
• Ökad produktivitet
• Du undviker vanliga misstag
• Du arbetar in en standard för namngivning
• Förenklar samarbete
• Du slipper tänka på webbläsarkompabilitet
• Du får ren och välstrukturerad kod
Fördelar
• Tar tid att lära sig
• Riskerar att ärva fel och buggar
• Du mister genuin kunskap om CSS
• Källkod som innehåller mycket onödig kod
• Du riskerar att fastna i gamla hjulspår
Nackdelar
Källa: http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/