Kaskadkoppling & Semantik

Jag har just börjat ett nytt projekt, eller rättare sagt så har jag börjat med att avsluta någon annans projekt. Normalt så brukar inte detta vara ett problem, men denna organisation är inte särskilt organiserad, det var ett tag sedan jag arbetade som frilansare utanför en agentur, men kanske är det så är pleben arbetar.

CSS, är en webbsidas stylist, C:et står för ‘Cascading’ dvs. kaskadkoppling, så alla klasser däri borde följa och implementera varandra, men dessa CSS filer är runt 16,000 rader tillsammans, och specificerar varje element individuellt. Hur fan kan man arbeta så!

t.ex. deras kod:

.account #wrapper .my-account #content h3 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 150%;
	color: #444;
	margin: 10px 5px;	
}

.account #wrapper .my-account #content h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 120%;
	color: #444;
	margin: 10px 5px;	
}

.account #wrapper .my-login #content h3 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 150%;
	color: #444;
	margin: 10px 5px;	
}

.account #wrapper .my-login #content h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 120%;
	color: #444;
	margin: 10px 5px;	
}

.payment #wrapper .payment-wrapper h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 120%;
	color: #ADFFCC;
	margin: 10px 15px;	
}

Hur jag tycker det borde se ut:

h3, h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	color: #444;
	margin:  10px 5px;
}
h3 {
	font-size: 150%;
}

h4 {
	font-size: 120%;
}

.payment-wrapper h4 {
	color: #ADFFCC;
	margin: 10px 15px;
}

Som ni ser är det mindre kod i min version, och enklare att ändra etc.

rant over!

Låt oss se om denna blogg är 2.0

Jag vet att webb 2.0 är lite ute nu, men jag ska åtminstone tvåpunknolla den innan den blir 3.0.

Det här inlägget borde nu bli twittrat och facebookat per automagi tack var två enkla plugins som tog 10min att konfigurera : WpBook och Twitter Tools.

När man jobbar inom webb och IT blir man ofta lite avtrubbat när det kommer till 2.0, det är ju mest bara buzzwords för kunderna att höra: ”Jo, såklart att du måste ha en Facebook app och en iPhone app, hur ska folk annars veta att du existerar”  (detta kommer efter att man har förklarat deras nya Brand Values och hur traditionellt gammaldags de måste vara)

Men nu är det så att jag numera vill att folk ska läsa min blogg om allt och inget (mest inget) eftersom att jag kommer att försvinna från all annan kontakt i 9 månader då jag ska resa runt sydamerika och ta det lugnt. Och för att de ska funka ”måste” jag använda mig av diverse API:er som Facebook, Twitter, Amazon och bit.ly m.m

Teknologeekerier – iPad CSS

Nu när apple har släppt sin nya iPad, kommer folk att köpa den även då den verkar vara crap.

Så då måste man nog som designer och utvecklare börja lägga till lite fler layouts och stylesheets, nog för att man inte behöver oroa sig över att göra en helt ny UI för den som har en smartphone,

Men med hjälp av CSS Media Queries har vi tidigare anpassat css för Iphones och Androids:

<link media=”only screen and (max-device-width: 480px)” href=”/iphone.css” type= ”text/css” rel=”stylesheet” />

Och igen har vi nya CSS Media Queries för iPaden:

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

Och om du nu utvecklat för iPhones och Androids förut så känner du säker till att safari tycker om att krympa din sida, och kringgått det med metatagen viewport

<meta name=”viewport” content=”width=device-width; initial-scale=1.0;” />

Så i grund och botten är det inte så svårt, bara en hel del css kodande efteråt.