F10 Mer CSS Dagens agenda

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; } Stöds först från och med IE8 content: url(pin.png);

CSS-genererat innehåll http://nicolasgallagher.com/pure-css-gui-icons/demo/#non http://css-tricks.com/9516-pseudo-element-roundup/

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" /> Alla enheter <link rel="stylesheet" media="screen" href="screen.css" /> <link rel="stylesheet" media="print" href="print.css" /> </head> 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 screen @media print @media handheld @media print p { color:black; }

Tänk på vid utskrift #mainnav { display: none; } http://alistapart.com

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-bottom:-10px; margin-left:-10px; margin-top:-10px;

body Layout med CSS, del 2 div #top start sida 1 div #content div #container div #navigation 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 #sidebar div #footer

Layouter med CSS en bra grund

Exempel på klassiska layouter

Negativa marginaler Problem: ningen i HTMLkoden Lösning: <div id="wrapper"> <div id="content"> <p> </p> </div> </div> + negativa marginaler

Lösningen 1 float:left width:150px #wrapper width:100% float:left 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

Lösningen 2 float:left width:150px margin-right:-150px #wrapper width:100% float:left 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

Lösningen #wrapper width:100% float:left 3 float:left width:150px margin-right:-150px Pellentesque habitant morbi tristique senectus et netus et malesuada margin-left:150px; 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

Lösningen #wrapper width:100% float:left 4 float:left width:150px margin-right:-150px Pellentesque habitant morbi tristique senectus et netus et malesuada margin-left:150px; 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 width:160px; float:right;

Lösningen #wrapper width:100% float:left 5 float:left width:150px margin-right:-150px Pellentesque habitant morbi tristique senectus et margin-left:150px; netus et malesuada fames ac margin-right:160px; 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 width:160px; float:right;

Lösningen #wrapper width:100% float:left margin-right:-180px 6 float:left width:150px margin-right:-150px Pellentesque habitant morbi tristique senectus et margin-left:150px; netus et malesuada fames ac margin-right:160px; 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 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

min/max width/height min-width max-width egenskaper min-width min-height max-height min-height #container { max-width: 1480px; min-width: 960px; } Stöds först från och med IE7

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 Nackdelar 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.

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 Fördelar Nackdelar Ö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 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 Källa: http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/