Fireisland » css http://www.fireisland.no Just another WordPress site Tue, 13 Dec 2011 00:15:52 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Bra CSS bøkerhttp://www.fireisland.no/tips/bra-css-b%c3%b8ker/ http://www.fireisland.no/tips/bra-css-b%c3%b8ker/#comments Thu, 30 Jul 2009 07:33:26 +0000 Anders-Meyer http://www.fireisland.no/?p=512

Read the rest of this entry »

]]> bra_css_bøker

Eg kika litt i webstatistikken for webdesign bloggen min og fann ut at mange søker etter CSS bøker, utan at eg har skrive noko som helst om CSS bøker! Dette må eg endre på så her presenterar eg nokre av dei CSS bøkene eg har lese  og synes er gode bøker for å lære seg meir CSS. Mange tenkjer at CSS ikkje er noko ein treng å lære frå bøker, ein finn jo mange gode artiklar om CSS på nettet. Men CSS bøker er som oftast bygd opp meir heilhetleg enn det sporadiske artiklar er. Det finnes ikkje nokre spesielt gode bøker om CSS på norsk, iallefall ikkje som eg veit om.

bulletproof_web_design

Bulletproof Web Design

God bok om XHTML og CSS, frå Dan Cederholm. Boka har mange praktiske og fleksible eksempel som gjer at dine webdesign blir “skuddsikre”.

41PUp9O8CBL

Web Standards Solutions: Second Edition

Denne boka har eg ikkje lese sjølv, men ein anna webentusiast frå Stord anbefalar ho, så då må den være bra. Det er også Dan Cederholm som har skrive denne boka så eg antek at denne boka passar bra i hop med Bulletproof Web Design boka.

css_bok

HTML Utopia: Designing Without Tables Using CSS

For mange år sidan måtte eg endre måten eg bygde nettsider på frå bruk av tabellar og “spacer-gifs” til dei skumle og ukjende “divane”. Då var denne boka ei god støtte å ha på ferda. Og denne kan anbefalst om du er vant til å bygge nettsider “old-school” og ynskjer å ta i bruk moderne teknikkar med XHTML og CSS.

Vonar at bøkene er til hjelp for dei som måtte trenge bra CSS bøker. Har nokon andre tips, skriv gjerne ein kommentar under :)

]]> http://www.fireisland.no/tips/bra-css-b%c3%b8ker/feed/ 7 Skjult skatt i Safari: webinspektør (debugger)http://www.fireisland.no/nettlesar/skjult-skatt-i-safari-webinspektor-debugger/ http://www.fireisland.no/nettlesar/skjult-skatt-i-safari-webinspektor-debugger/#comments Mon, 10 Nov 2008 18:29:51 +0000 Anders-Meyer http://www.fireisland.no/?p=311

Read the rest of this entry »

]]>

I FireFox brukar eg Firebug til feilsøking på HTML og CSS, men i safari har eg endeleg funne eit godt alternativ. Og det ligg integrert i Safari – verkeleg ein skjult skatt!

For å aktivere Safari webinspektør gjer du følgjande:

  1. Lukk Safari
  2. Start Terminal
  3. Skriv følgjande kode:
    defaults write com.apple.Safari IncludeDebugMenu 1
  4. Start Safari
  5. Høgreklikk eit element på ei nettside og velg “Inspiser element”
Skulle ynskje Internet Explorer hadde like gode feilsøkingsverktøy, det er jo der ein verkeleg treng dei!
]]> http://www.fireisland.no/nettlesar/skjult-skatt-i-safari-webinspektor-debugger/feed/ 5 Alt du veit om CSS er feil!http://www.fireisland.no/webdesign/alt-du-veit-om-css-er-feil/ http://www.fireisland.no/webdesign/alt-du-veit-om-css-er-feil/#comments Wed, 22 Oct 2008 23:08:50 +0000 Anders-Meyer http://www.fireisland.no/?p=256

Read the rest of this entry »

]]>  

Alt du veit om CSS er feil!, slik lyder tittelen på ei ny bok frå Sitepoint: “Everything You Know About CSS Is Wrong!“. Boka viser deg nye teknikkar i CSS som gjer at du slepp avanserte flyte-layoutar og “hacks” for å få webdesignet på stell med CSS-basert layout. Dei påstår at det skal bli lettare å bruke CSS, noko som høyres ut som ein kjedeleg kvardag tykkjer eg.

Dei viser teknikkar som ikkje er 100% støtta i dagens nettlesarmarknad, men så snart IE 8 er nummer 1 blant windowsbrukarane vil teknikkane dei viser ha full støtte. Alle dei andre støttar det allerde: Firefox, Safari, Opera osv..

Dei går spesielt inn på den nye støtten for display:table; display:table-cell; og display:table-row; disse nye display-mulighetane gjer at du kan få alt frå DIVar til H2ar til å oppføre seg som tabellceller – altså CSS-tabellar. Dette gjer at me kan la semantisk-html-kode presentere layouten som ein tabell utan at det er ein tabell. Eh, det høyres jo litt tåpeleg ut, kvifor ikkje berre bruke ein tabell til? Jo, du får ryddigare, lettare og rettare kode i motsetnad til å lage ein tabell-tabell som er tyngre.

Digital Web Magazine viser eit eksempel frå boka:

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
⋮ HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
⋮ navigation column content…
</div>
<div id="extras">
⋮ news headlines column content…
</div>
<div id="content">
⋮ main article content…
</div>
</div>
</div>
</body>
</html>

CSS:

#main {
  display: table;
  border-collapse: collapse;
}

#nav {
  display: table-cell;
  width: 180px;
  background-color: #e7dbcd;
}

#extras {
  display: table-cell;
  width: 180px;
  padding-left: 10px;
  border-right: 1px dotted #d7ad7b;
}

#content {
  display: table-cell;
  width: 380px;
  padding-left: 10px;
}

Ferdig webdesign:

Dette virka svært lovande tykkjer eg, spesielt med tanke på vertikalfordeling, der har alltid tabellar hatt overtaket på CSS. Det var på tide at det kom ei ordning på det. Men det er nokre år til me kan bruke det aktivt då, diverre.. framleis mange som brukar både internet explorer 7 og 6! Kanskje i 2010?

]]> http://www.fireisland.no/webdesign/alt-du-veit-om-css-er-feil/feed/ 4 7 gratis verktøy for å optimalisere css og annen webkodehttp://www.fireisland.no/webdesign/7-gratis-verkt%c3%b8y-for-a-optimalisere-css-og-annen-webkode/ http://www.fireisland.no/webdesign/7-gratis-verkt%c3%b8y-for-a-optimalisere-css-og-annen-webkode/#comments Tue, 12 Aug 2008 06:00:56 +0000 Anders-Meyer http://www.fireisland.no/?p=164

Read the rest of this entry »

]]>

Det finnes mange gode verktøy på internett for optimalisere css-koden du lagar. Her har eg samla 10 slik verktøy. Eg brukar dei ofte for å komprimere css-kode etter at eg er ferdig med eit prosjekt.

NB! Optimalisert CSS er ikkje særleg lesbart, så du må hugse å ta backup av din originale  css-kilde før du byrjar. Dersom du skal gjere endringar bør du gjere dette i original fila og deretter optimalisere på nytt.

Pretty Printer

Dei kallar dette verktøyet for ein kildekode “forfinar”(Les: “source code beautifier”). Det støttar mange programmerings språk: PHP, Java, C++, C, Perl, JavaScript CSS. Her kan du også påverka resultat sjølv, med å velgja forskjellige metodar.

Online CSS Optimizer

Reduserar filstørrelsen på cssfila di. Du kan laste opp fil eller oppgi url.

Tabifier

Dette verktøyet gir deg ikkje mindre størrelse på fila, men ryddar opp i innrykka CSS-fila. Det støtter også følgjande språk: HTML, CSS og C.

Online CSS Optimiser

Nok eit verktøy som optimaliserar CSSkode. Men det som er bra med denne er at du får lesbar kode når du er ferdig, dersom du velgjer “Pretty Print”.

Format CSS Online

Let deg automatisk formatere CSS-koden. Litt same funksjonalitet som tabifier, men her har du fleire muligheter enn å berre endre innrykka. Ikkje minst at du kan sortere CSS alfabetisk.

Clean CSS

Optimaliserar også CSS kode, men her kan du velgje mellom 5 grader av kompressjon vs. lesbarhet.

CSS Compressor

Til sist, nok ein css komprimerar. Denne let deg  velge grad av kompresjon og om du vil behalde kommentarar eller ei.

]]> http://www.fireisland.no/webdesign/7-gratis-verkt%c3%b8y-for-a-optimalisere-css-og-annen-webkode/feed/ 1