Den nya templatesajten

Fredrik Gustafsson — Thu, 18 Nov 2010 14:30:10 +0000

Som en del av er vet och som en del av er kanske märkt så har templatesajten blivit uppdaterad med ett helt nytt ramverk.

Den nya templatemallen är en från grunden omgjord plattform för att ligga som grund många olika typer av projekt. Markup och stilmallar är byggda för att utgöra en generellgrund anpassad för helt olika typer av design och funktionalitet.

Ramverket

Ramverket är en uppdatering av den äldre templatemallen som följer de senaste trenderna i webbutveckling och levererar en mer generell plattform att bygga stabila webbplatser på. Dess struktur är uppbyggd för att kunna anpassas på väldigt många olika sätt med wrappers som hanterar bredder och den grundläggande layouten, containers som hanterar avstånd och justeringar och content som enbart ska stylas efter dess generella utseende oberoende av container. Med den strukturen är det lätt att styla om innehållet på det vis som behövs för varje specifikt projekt och det gör det lätt att skapa snygga anpassningar för mobil och print. Ett konsekvent ramverk möjliggör även mer avancerade AJAX-funktioner och javascript som förhöjer den avancerade användarens webbupplevelse.

HTML5

Templatemallen är baserat på HTML5 med den enkla doctypen . Detta gör det möjligt att kunna använda nya tekniker och element som ingår i den nya standarden och anamma det nya tankesättet på ett sätt att de webbplatser som skapas idag även är framtidssäkrade. Eftersom många av de webbläsare som används idag inte har stöd för de nya elementen i HTML5 som

Återvinn dina javascript-plugin

Fredrik Gustafsson — Thu, 18 Nov 2010 07:59:16 +0000

De flesta som bygger funktioner i javascript märker efter ett tag att man väldigt ofta skriver om samma funktioner gång på gång för att tillämpningen skiljer sig lite från förra gången. Då försöker man skapa mer generella plugins där man skapar en lista med egenskaper och variabler som man med olika anrop kan påverka resultatet av pluginet.
Exempelvis

jQuery.prototype.myAlert = function(argument){
  var option = jQuery.extend({
    message : "Hello world",
    click : function(){
      alert(option.message);
      return false;
    }
  }, argument);
  jQuery(this).click(option.click);
};
jQuery('a').myAlert({'message':'A whole new world'});

Denna metod är en väldigt generell och kraftfull metod som kan påverkas i sina anrop beroende på vilka argument, man anropar den med. Men problemet med denna lösning är att det är en inkapslad metod som inte kan ärvas och för att anropa olika modifierade instanser av den på samma sajt kräver att man sätter väldigt specifika sökvägar.

jQuery('#mybox .special-intance a.alert').myAlert({'message':'normal message'});
jQuery('#content .some-specific-place a.alert').myAlert({'message':'a even cooler message'});

Istället skulle man vilja skapa en instans av pluginet för varje objekt och sedan modifiera och utöka parametrar och funktioner för undantagen. Detta går att åstadkomma genom att skapa ett publikt objekt för varje plugin, där parametrarna sätts som funktionsparametrar direkt på objektet.

var myAlert = {
    message : 'hello world',
    onclick : function(){
	alert(this.message);
	return false;
    },
    init : function(){
	 //initcode
    }
};
jQuery.fn.myAlertBox = function(args){
    var opt = jQuery.extend({}, myAlert, args);
    function init(){
        $(this).setProperties(opt);
	if(typeof(this.init) == 'function'){
		this.init();
	}
    }
 return this.each(init);
};
jQuery.fn.setProperty = function(mykey, myvalue){
    function init(){
        this[mykey] = myvalue;
    }
    return this.each(init);
};
jQuery.fn.setProperties = function(args){
    function init(){
	for (var key in args) {
		$(this).setProperty(key, args[key]);
	}
    }
    return this.each(init);
};
jQuery(function(){
    jQuery('a').myAlertBox({'message' :'hello all links'});
    jQuery('li a').setProperties({"message":"inside a list"});
});

Objekten kan givetvis utöka jQuery-objektet för att kunna definiera mer avancerade jQuery funktioner och händelser.

Med denna funktionalitet kan vi bygga lättare plugin som utför grundfunktionaliteten i exempelvis ett bildspel eller lightbox, och kan utöka objektet för varje typ av implementation och undvika onödiga buggar och frustration.

Har du åsikter om denna metod eller förslag på bättre lösningar så är jag väldigt intresserad av att diskutera dem.

Framtidens formulär idag

Fredrik Gustafsson — Wed, 20 Oct 2010 11:19:33 +0000

Som alla vet så heter framtiden HTML5 och innehåller massor med vackra och häftiga funktioner som vi som webbutvecklare inte kan vänta på att få använda oss av som klientvalidering, inputtyper för flera olika typer av data, placeholder-text, felmeddelanden, autofocus datepickers, nummerstegning etc. etc.

Många av dessa funktioner är redan implementerade i de moderna bra webbläsarna på marknaden som gör livet lätt för oss utvecklare, för att uppnå samma funktionalitet i äldre webbläsare måste man bygga sina egna skript, men de ska enbart användas på de webbläsare och de versioner som inte redan har inbyggt stöd för HTML5 funktionaliteten.

Där kommer Modernizer in. Modernizer är ett litet skriptbibliotek som testar webbläsarens funktionalitet mot funktioner och element i HTML5 och gör det enkelt att applicera sina skript och stilmallar till enbart de webbläsare som behöver den. Detta genom en uppsättning av funktioner som testar en viss feature, eller via sökvägar, då den sätter webbläsarens egenskaper som klassnamn på
Modernizer initierar även HTML5 element vilket gör att de är stilningsbara i Internet Explorer, men för att det ska fungera måste Modernizer inkluderas i .

Man kan kolla om webbläsaren har stör för just den aktuella funktionen, med:

if (!Modernizr.inputtypes.date) {
//specialscript
}

Eller peka ut sökvägar utifrån specifika features exempelvis:

.no-borderradius #mybox{//style}

Mer om Modernizer hittar ni på http://www.modernizr.com/

För att inte alla ska behöva bygga dessa grymma skript själva så har jag byggt ett relativt komplett paket av HTML5 formulärfunktionalitet för alla webbläsare som bara behöver läggas in och anropas med,

$(document).ready(function(){
$(this).initforms();
})

Men innan ni får hämta hela paketet, ska jag förklara kort vad skriptet gör och hur de fungerar.

Validering

För att enkelt kunna validera fält för deras inmatningstyp definierar jag enkla funktioner som jämför värdet mot ett reguljärt uttryck och returnerar sant eller falskt.

var validate = {
	email : function(value){
			return value.match(/^.+@.+\..+$/)?true:false;
	},
	number : function(value){
			return value.match(/^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i)?true:false;
	},
	tel : function(value){
			return value.match(/^\+?\d+(?:\-\d*)?(?:[+\-\ ]?\d+)*\ ?$/i)?true:false;
	},
	date : function(value){
		return value.match(/^[0-9][0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]$/i)?true:false;
	},
	url : function(value){
		return value.match(/^([A-Za-z]+:\/\/)?[A-Za-z0-9-_]+\.[A-Za-z0-9-_%&\?\/.=]+$/)?true:false;
	},
	pattern : function(value, pattern){
		return value.match(pattern)==value?true:false;
	}
};

De typer av inputfält som valideras är text, email, url, number, tel, date och pattern.
Varje gång ett inputfält ändras, triggar eventet ‘validate’ som hanteras olika för varje enskild formulärtyp. Om fältet innehåller mer än 25 tecken valideras inte längre fältet pågrund av prestandaproblem.

$('input', container).bind('keyup click focus blur change', function () { //Sniffa efter alla förändringar i fältet
        var input = $(this);
	if(this.value.length<25){
		input.removeClass('valid long').trigger('validate');
	} else{
		$(this).addClass('long').removeClass('valid invalid'); //För lång classnamnet "long" hindrar validering
	}
        if (!input.is('[type=radio]') && !input.is('[type=checkbox]')) {
            if (input.val().length && !input.is('.placeholder')) {
                input.removeClass('empty');
                if (!input.is('.long') && !input.is('.invalid-email') && !input.is('.invalid-number') && !input.is('.invalid-tel') && !input.is('.invalid-date') && !input.is('.invalid-url') && !input.is('.placeholder') && !input.is('.invalid-pattern')) {
                    //Om fältet inte är invalid av något slag så är den valid
                    input.removeClass('invalid').addClass('valid').next('.errormsg').remove();
                }
            } else {
                input.addClass('empty');
            }
        }
}).trigger('change'); //Kör kontroller initialt

Själv kontrollen av fältet gör separat för varje fälttyp exempevis för epost:

$('input.email:not([pattern])', container).bind('validate', function () { //validera epostfält med class="email"
	if (!validate.email(this.value)) {
		$(this).addClass('invalid invalid-email');
	} else {
		$(this).removeClass('invalid-email');
	}
});

Observera att den appliceras på inputfält med klassnamet ”email” istället för inputtyp, detta för att vissa äldre webbläsare inte ens uppfattar type-värdet. Detta innebär även att HTML5 funktionaliteten är användbar för dokument som inte använder HTML5 doctype eller html5formulär. Vi använder inte heller modernizer för denna kontroll eftersom vi inte kan styra den som vi kan styra vår egen. Dockj är det viktigt att de reguljära valideringuttrycken överensstämmer med specen för den inbyggda valideringen i moderna webbläsare.

Man kan för egna fält även sätta reguljära valideringsmönster för sina fält med attributet pattern=” ”, vilken då är överordnad till alla andra valideringsformer.
Mer om pattern och andra HTML5formulärattribut kan studeras på http://www.w3.org/TR/html5/forms.html

Felmeddelanden

Fält som inte validerar korrekt får direkt klassnamnet ”invalid” vilken kan stylas för att ge direkt feedback till användaren och exempelvis färga fältet rött. När formuläret skickas vill man dock poängtera vilka fel som finns i formuläret innan formuläret skickas. För detta ändamål används felmeddelanden. Felmeddelanden sätts ut på alla obligatoriska formulärfält som inte är valida. För att visa vilka som är obligatoriska används attributet required=”required”. Dessa förhindrar att formuläret skickas förrän de är korrekt ifyllda. Det är också möjligt att felmeddelanden visas för ej obligatoriska fält, med klassnamnet ”validate”, dessa förhindrar dock inte formuläret från att skickas.

Felmeddealndefunktionen anropas när en submit-knapp klickas inuti en

och formulärvalideringen görs enbart på alla formulärelement inom samma

. För att andra knappar på sidan som inte har för uppgift att skicka formuläret inte ska hindras måste attributet formnovalidate=”formnovalidate” sättas på dessa.

$('fieldset button[type=submit], fieldset input[type=submit]', container).not('[formnovalidate]').click(function() {
		var fieldset = $(this).closest('fieldset');
		if (fieldset.find('[required].invalid, [required].empty, .validate.invalid:not(.empty)').length) {
				fieldset.find('[required].invalid, [required].empty, .validate.invalid:not(.empty)').showErrors();
				return false;
		}
		$('input.placeholder', fieldset).removeClass('placeholder').val('');
});

Beroende på vilket fel som upptäcks sätts olika felmeddelanden som läggs in i DOM’en direkt efter det aktuella fältet.
Felmeddelanden har defaulvärden men kan ersättas med egna värden, i detta exempel ersätts de strängar som finns satta i den globala variablen sse.errorMessages.

$.fn.showErrors = function(args){
	var opt = jQuery.extend(jQuery.extend({
	  text: "Fältet får inte lämnas tomt",
		email: "Du måste ange en korrekt epostadress",
		number: "Värdet måste vara ett nummer",
		date: "Du måste ange ett korrekt datum",
		url: "Ange en korrekt url",
		pattern: "Felaktigt format",
		select: "Du måste ange ett alternativ",
		custom: ""
	},errorMessages),args);
	$(this).each(function(){
		var input = $(this);
		var errormsg = $(this).next('.errormsg').length ? $(this).next('.errormsg') : $('

');
		if(opt.custom !== ""){
			errormsg.text(opt.custom);
		} else if(input.is('.invalid-email')){
			errormsg.text(opt.email);
		} else if(input.is('.invalid-number')){
			errormsg.text(opt.number);
		} else if(input.is('.invalid-date')){
			errormsg.text(opt.date);
		} else if(input.is('.invalid-url')){
			errormsg.text(opt.url);
		} else if(input.is('.invalid-pattern')){
			errormsg.text(opt.pattern);
		} else if(input.is('[type=text]')){
			errormsg.text(opt.text);
		} else if(input.is('select')){
			errormsg.text(opt.select);
		}
		if(input.is('[type=password].empty')){
			input.prev('.replacement').addClass('invalid').removeClass('empty');
		}
		errormsg.insertAfter(input.removeClass('empty'));
	});
	return this;
};

Placeholder

Det väldigt praktiska HTML5-attributet placeholder är implementerat i många moderna webbläsare och ger en schablontext i fältet när det lämnas tomt och försvinner när fältet får fokus. Även denna funktionalitet är självklart implementerad. Och sättas automatiskt på alla inputfält som har ett placeholder-attribut.
För att lösenordsfält också ska fungera utan att visa schablontexten som stjärnor, skapar ett identiskt fält som byts ut när lösenordsfältet får och förlorar fokus.

$.fn.setPlaceholder = function(text){
	function init(){
		var input = $(this);
		if(!text){
			var text = input.attr('placeholder');
		}
		var replacement = $('');
		var type = input.attr('type');
		input.blur(function(){
			if(!input.val()){
				if (type=="password"){
					input.hide();
					replacement.insertBefore(input).show();
				} else {
					input.val(text).addClass('placeholder');
				}
			}
		}).focus(function(){
			if(input.is('.placeholder')){
				input.removeClass('placeholder').val('');
			}
		});
		replacement.focus(function(){
			$(this).hide().next('input').show().focus();
		});
		if(!input.val() || input.val() == text){
			if (type=="password"){
				input.hide();
				replacement.insertBefore(input).show().width(input.width());
			} else {
				input.val(text).addClass('placeholder');
			}
		}
	}
	return this.each(init);
};

Special inputformat

Förutom vanliga textfält av olika slag har HTML5 specifikationer för andra typer av formulärelement som sliders, datepickers, nummerstegare och sökfält.
Dessa är implementerade för olika slag av implementering.

Sliders

Sliders kan skapas på två olika sätt, antingen enligt HTML5-specifikationen för som då visar fältet som en slider. (Appliceras i skriptet utifrån klassnamnet ”range”). Denna typ bör ha attributen max=”", min=”" och step=”" och data-units=”kronor” (som sätter ut det satta värdet med units efteråt, bakom sliderns).

Det andra sättet att generera en slider är utifrån en dropdownlista med fasta gradvisa steg.

Denna skapa en slider med lika många steg som options och visar det aktuella valets innehåll efter slidern.

Datepicker

Nästan alla projekt använder någon gång en datepicker för att underlätta valet av datum för användaren. Denna är automatiskt aktiverad för alla Och använder sig av jquery-UI med svenskt tidsformat.
Beakta att eftersom HTML5-funktion denna är implementerad i exempelvis Opera, och använder sig av Modernizer kommer ett fält som inte är av typen date, inte visa någon datepicker alls för klass ”date”. Denna funktion har heller inte (i dagsläget) stöd för de övriga datumformaten som är specade i HTML5 som , etc.

if (!Modernizr.inputtypes.date) {
		$('input.date', container).datepicker({ onClose: function () {
				$(this).removeClass('placeholder').focus();
		}
		}).bind('validate', function () {
				if (this.value && !validate.date(this.value)) { $(this).addClass('invalid invalid-date'); } else { $(this).removeClass('invalid-date'); }
		}).keydown(function (e) {
				var input = $(this);
				var currentDay = $('#ui-datepicker-div .ui-datepicker-current-day');
				switch (e.keyCode) {
						case 38: //Up
								if (!currentDay.prev('td').length || currentDay.prev('td.ui-datepicker-unselectable').length) {
										if (currentDay.parent().prev().length < 1) {
												$('#ui-datepicker-div .ui-datepicker-prev').trigger('click');
												$('#ui-datepicker-div table a:last').trigger('click');
										} else {
												currentDay.parent().prev('tr').find('a:last').trigger('click');
										}
								} else {
										currentDay.prev().find('a').trigger('click');
								}
								input.focus();
								break;
						case 40: //Down
								if (!currentDay.next('td').length || currentDay.next('td.ui-datepicker-unselectable').length) {
										if (currentDay.parent().next().length < 1) {
												$('#ui-datepicker-div .ui-datepicker-next').trigger('click');
												$('#ui-datepicker-div table a:first').trigger('click');
										} else {
												currentDay.parent().next('tr').find('a:first').trigger('click');
										}
								} else {
										currentDay.next().find('a').trigger('click');
								}
								input.focus();
								break;
						case 33: //PageUp
								$('#ui-datepicker-div .ui-datepicker-prev').trigger('click');
								$('#ui-datepicker-div table a:last').trigger('click');
								input.focus();
								break;
						case 34: //PageDown
								$('#ui-datepicker-div .ui-datepicker-next').trigger('click');
								$('#ui-datepicker-div table a:first').trigger('click');
								input.focus();
								break;
				}
		});
}

Datepickern har naturligtvis stöd för tangentbordsnavigation och hoppa hela månader med pageUp/Down.

Nummerstegare

HTML5 specifikationen specifierar att automatiskt applicerar en stegare där man kan klicka med mus eller tangentbord för att öka eller minska värdet gradvis. Denna funktionalitet är också implementerad, men kräver attributet ”step”, för att man ska kunna validera nummerfält av andra slag, exempelvis kreditkortsinformation etc.

Stegningen kan specifieras med attributen min=”", max=”" och step=”".

Sökfält

Sökfält har en egen funktionalitet som är specifierat i HTML5 som skiljer sig mot andra fält på det sättet att när det har innehåll dyker upp ett litet kryss i högerkantetn av formuläret som ger möjligheten att enkelt tömma fältet. Detta är framförallt praktiskt för mobiltelefoner och musanvändare. Denna funktionalitet läggs automatiskt på alla fält av type=search eller klassnamn ”search”.

Autofokus

Det finns även en praktisk specifikation att med attributet autofocus=”autofocus” automatiskt sätta fokus på det aktuella fältet. Denna ska bara användas på ett fält per sida, exempelvis sökfält, på söksidan.

UngroupOptgroup

Yttligare i formulärskripet finns det en funktion som delar upp en större dropdownlista med s till två kortare dropdowns, där man i första enbart väljer bland optgroup-rubrikerna och sedan väljer värde. Denna används inte automatiskt utan måste anropas när den är önskvärd, med.

$('select optgroup').parent('select').ungroupOptgroup();

Ladda hem HTML5Forms

Om du har läst ända hit tycker jag att du nu förtjänar att få ladda hem skript och börja leka, använda och vidareutveckla.
Om du saknar någon viss formulärfunktionalitet, upptäcker någon bugg eller vill veta mer om skriptet, så får du gärna höra av dig.
HTML5Forms (ZIP)

CSS Pseudoklasser i IE

Fredrik Gustafsson — Thu, 12 Aug 2010 09:32:39 +0000

Att utveckla för Internet Explorer innebär ofta att man skapar speciallösningar och att man bygger skript som åstadkommer samma stilningsresultat som riktiga webbläsare hanterar med CSS. På så sätt bildas det dubbletter där man får samma resultat på två olika ställen och man definierar sidans design både i CSS och i javascript. När man sedan vill ändra designen eller vidareutveckla sajten blir det ett väldigt arbete att hitta alla stylesättande skript.

Trots att Internet Explorer saknar mycket funktionalitet i CSS har den en feature som är väldigt praktisk, i IE kan du sätta variabler med CSS.

a.mylink{ store-my-valueplease : 45px; } Trots att webbläsaren inte förstår stilklassen lagras den och är åtkomlig via javascript.

Tack vare denna bug/feature, kan man definiera egna stilklasser specifika för IE som bakomliggande skript kan använda för att uppnå det önskade beteendet, medan alla stilregler sätts enbart i CSS, precis som det ska vara.

Med denna teknik har jag byggt några tillämpningar för vanliga stilmallsklasser och pseudoelement som Internet Explorer saknar.

Kodexempel följer!

min-width / max-width / min-height / max-height

IE6 saknar möjligheten att tolka min och max klasser i CSS, men med ett litet skript kan samma resultat uppnås.

$.fn.cssMaxWidth = function(){
	this.each(function(){
		if ($(this).css('max-width') != "none"){ //fix for IE6
			var maxWidth = $(this).css('max-width').match(/^(.+?)px$/)[1];
			if ($(this).width()>maxWidth){
				$(this).width(maxWidth);
			}
		}
	});
	return this;
};

Funktionen anropas på de obejkt som ska genomsökas efter stilklassen max-width.

if ($.browser.msie&&($.browser.version<7)){ //anropas enbart för IE6 och tidigare
$('img).cssMaxWidth();
}

Beaktka att width (utan overflow:hidden) i IE6 fungerar på samma sätt som min-width gör i andra webbläsare och behöver oftast inte specialscript.

first-child / last-child

I de flesta moderna webbläsare kan du med CSS peka ut första och sista elementet av en viss typ med pseudoselektorn :first-child, :last-child. Denna funktionalitet är dock inte implementerad i någon av versionerna för Internet Explorer och behöver därför uppnås med script eller klassnamn på första och sista elementet. Då klassnamn är att föredra eftersom det fungerar även utan javascript, kan det i vissa fall vara smidigt att styla första och sista elementet lite annorlunda.

$.fn.cssFirstChild = function () {
    //Fix for IE6, IE7, IE8 (in IE8 this only works if styles is not combined with :first-child)
    // combined with the css-class e.g. 'selector: '.classname'; you can specify what object you wnat the last-child of.
    this.each(function () {
        if ($(this).css('first-child')) {
            var firstChild = $(this).css('first-child').match(/^['"]?(.+?)["']?$/)[1];
            if ($(this).css('selector')) {
                var selector = $(this).css('selector').match(/^['"]?(.+?)["']?$/)[1];
                $(this).find(selector + ':first-child').addClass(firstChild);
            } else {
                $(this).find(':first-child').addClass(firstChild);
            }
        }
    });
    return this;
};
$.fn.cssLastChild = function(){
	//Fix for IE6, IE7, IE8 (in IE8 this only works if styles is not combined with :last-child)
	// combined with the css-class e.g. 'selector: '.classname'; you can specify what object you wnat the last-child of.
	this.each(function(){
		if ($(this).css('last-child')){
			var lastChild = $(this).css('last-child').match(/^['"]?(.+?)["']?$/)[1];
			if ($(this).css('selector')){
				var selector = $(this).css('selector').match(/^['"]?(.+?)["']?$/)[1];
				$(this).find(selector+':last-child').addClass(lastChild);
			} else {
				$(this).find('>:last-child').addClass(lastChild);
			}
		}
	});
	return this;
};

Med dessa plugins sätter man in egna klasser på första eller sista elementet, och stilar sedan det objektet med en vanlig klasselektor.

#main-nav ul li:last-child{style}
#main-nav ul{
last-child : "last-child";
selector : 'li'   /* Selector är valfri, men gör att du kan välja mer specifika objekt ex. li.odd  */
}
#main-nav ul li.last-child{style}

Beakta att stilmallarna för li.last-child måste skrivas separat trots att de är identiska med de för li:last-child, men IE hoppar över hela objektet då den läser li:last-child och de kan därför inte kombineras.

mychild / mysibling

I moderna webbläsare kan man med hjälp av selektorerna + och > begränsa sök mängden till direkta syskon eller direkta barn, denna funktionelitet stöds inte i IE6 och IE7 dock, men då finns det ett plugin även för detta.

$.fn.cssMyChild = function(){
	this.each(function(){
		if ($(this).css('myChild')){ //fix for IE6, IE7
			var myChild = $(this).css('myChild').match(/^['"]?(.*?)["']?$/)[1].split('.');
			$(this).children(myChild[0]).addClass(myChild[1]);
		}
	});
	return this;
}
$.fn.cssMySibling = function(){
	this.each(function(){
		if ($(this).css('mySibling')){ //fix for IE6, IE7
			var mySibling = $(this).css('mySibling').match(/^['"]?(.*?)["']?$/)[1].split('.');
			$(this).parent().children(mySibling[0]).addClass(mySibling[1]);
		}
	});
	return this;
}

Dessa kan användas på liknande sätt som last-child,

#container > div{style}
#container{
myChild : 'div.children';
}
#container div.children{style}

#main + div{style}
#main{
mySibling : 'div.sibling';
}
#main div.sibling{style}

after / before
Det är även möjligt att skapa pseudoelement på liknande sätt som kan göras med :after och :before i vettiga webbläsare.

$.fn.cssAfter = function(){
	//Fix for IE6, IE7 (IE 8 sets dubble if combined with :after)
	return this.each(function(){
		if ($(this).css('after')){
			var after = $(this).css('after').match(/^['"]?(.*?)["']?$/)[1];
			if (after.substr(0,3) == 'url'){
				after=$('').attr('src', after.substr(5,after.length-7)).addClass('after');
			}
			$(this).append(after);
		}
	});
};
$.fn.cssBefore = function(){
	//Fix for IE6, IE7 (IE 8 sets dubble if combined with :after)
	return this.each(function(){
		if ($(this).css('before')){
			var before = $(this).css('before').match(/^['"]?(.*?)["']?$/)[1];
			if (before.substr(0,3) == 'url'){
				before=$('').attr('src', before.substr(5,before.length-7)).addClass('before');
			}
			$(this).prepend(before);
		}
	});
};

Med dessa stilar man på följande sätt

a:after{
content : "\A00BB";
}
a{
after : "\A00BB";
}
blockquote:before{
content : url('quote.png');
}
blockquote{
before : url('quote.png');
}

hover / focus
PseudoEventSelektorerna :hover och :focus stöds faktiskt i samtliga versioner av Internet Explorer, men enbart på länkar och inputfält. Vill man styla andra objekt vid fokus eller hover, kan man använda detta plugin.

$.fn.cssHover = function(){
	this.each(function(){
		if ($(this).css('hover')){ //fix for IE6
			var hover = $(this).css('hover').match(/^['"]?(.+?)["']?$/)[1];
			$(this).mouseover(function(){$(this).addClass(hover);}).mouseout(function(){$(this).removeClass(hover);});
		}
	});
	return this;
}
$.fn.cssFocus = function(){
	this.each(function(){
		if ($(this).css('focus')){ //fix for IE6, IE7
			var focus = $(this).css('focus').match(/^['"]?(.+?)["']?$/)[1];
			$(this).focus(function(){$(this).addClass(focus);}).blur(function(){$(this).removeClass(focus);});
		}
	});
	return this;
}

Med stilmallen

#main-nav li:hover ul{
display:block;
}
#main-nav li{
hover : 'overme';
}
#main-nav li.overme ul{
display:block;
}

Samma princip går att utnyttja för massor med liknande funktioner för att få IE at fungera lite bättre, men tänk på att enbart använda dessa funktioner för sådant som inte är nödvändigt för att kunna använda sidan, eftersom de inte kommer att fungera för användare som inte har stöd för javascript.

Beakta även att även om dessa klaser går utmärkt att blanda med andra stilar eftersom de ignoreras av alla webbläsare, resulterar de i invalida stilmallar och bör begränsas till IE-specifika mallar. Kom även ihåg att applicera dessa plugins på alla de typer av objekt som de ska användas för och enbart i de webbläsare där de faktiskt behövs.

if ($.browser.msie&&$.browser.version<7){
		$('#main-nav li').cssHover();
}
if ($.browser.msie&&$.browser.version<8){
	$('a, blockquote').cssAfter();
	$('a, blockquote').cssAfter();
}
if ($.browser.msie&&$.browser.version<9){
		$('#main-nav ul').cssLastChild();
}

Svunna minnen från SWDC

Fredrik Gustafsson — Tue, 10 Aug 2010 15:03:15 +0000

Två månader har hunnit passera sedan jag var på Scandinavian Web Developer Conference 2010 på Skandiateatern i Stockholm. Det var två fullspäckade heldagar om webbutveckling och mobilutveckling med moderna webbtekniker, av några av världens mest framstående talare på området.

Första dagen talade bland andra Daniel Glazman (@glazou) som är en av de gamla rävarna från W3C som har varit med från allra första början när webben vuxit fram till vad det är idag. Han predikade självklart om vikten av webstandarder och att vi måste börja använda de nya teknikerna i HTML5, CSS3 för att gamla avdankade webbläsare som Internet Explorer 7 och 6 måste försvinna. Flash är en bra platform, men den kräver en annan kompetens som kostar mer för samma resultat.

”We dont want to kill flash, it will be an unexpected side-effect”

Han visade exempel på hur man med Canvas kan spela mariocart på en ipad och styra genom att komma åt ipadens accelerometer, direkt i webbläsaren. (http://www.nihilogic.dk/labs/mariokart/).

Allas vår egen Robert Nyman (@robertnyman) från Valtech, presenterade HTML5 och vilka möjligheter det medför för utvecklare och användare.

Cristian Heilmann (@codepo8) från Yahoo, predikade som alltid om Progressive Enhancement, och att alla webbplatser ska gå att använda på en dålig mobiltelefon, med en taskig uppkoppling utan javascript. Men användarna bryr sig inte om de coola effekter och funktioner som vi utvecklare lägger ner dagar på att utveckla och anpassa för att de ska se lika bra ut i IE6 som i Safari.

De flesta användare som sitter med gammal utrustning och dåliga webbläsare har inte något val. Antingen är de rädda för virus och inte vågar ladda hem någonting nytt, eller så sitter de på ett företag där de inte får ha javascript påslaget pågrund av att javascript är en säkerhetsrisk (om den används på fel sätt), eller vet inte skillnaden på webbläsare, sökmotor och epost. Låt informationen vara åtkomlig och gör webbplatser tillgängliga, men låt varje teknik hantera den ”design” den klarar av. Tvinga inte in runda hörn, transparens, skuggor, lagerpålager, ajax och max-bredder på de plattformar som inte är gjorda för dem, för användarna bryr sig inte om det som vi tycker är ballt.

Han föreslog en underbar slutgiltig lösning på hur vi tillsammans kan hjälpas åt för att få bort IE6 utan att sluta stödja den. Amelie from Montemartmetoden (http://icant.co.uk/ie6-amelie/) är ett litet skript som vi kan lägga in på våra webbplatser som utnyttjar en väldigt konstig ”blur”-effekt som finns stöd för i IE6. Men slumpmässiga mellanrum kommer all text på webbsidan att bli suddig för IE6 användare under ett kort ögonblick. Efter några månade talar man om att det kan bero på mjukvaruutmattning och att om det inte åtgärdats även kan drabba hårdvaran. Ändra IE6 problemet från ett teknikproblem till ett hälsoproblem, så får det en helt annan prioritet.

Rik Arends (@rikarends) från Ajax.org demate ett väldigt läckert webbaserat IDE (@cloudide) för kooperativ webbutveckling i molnet. Det ger möjlighet för designer, frontend-utvecklare, backendutvecklare och testare att samarbeta, utveckla och köra lösningar direkt i molnet via webbläsaren. Designer skapar ett GUI genom drag and drop som sedan byggs logik till av utvecklarna. Testfall kan skapas på ursprungliga prototyper som sedan körs och spelas in medan produkten vidareutvecklas. Som ett komplett bättre Visual Studio i molnet med direktkoppling till GitHub.

Andra talare under första dagen pratade om nodeJS, CouchDB, javascriptmoduler för stora webbplatser, google chrome extensions och google för utvecklare.

Dag två inriktade sig helt på mobil utveckling och hur vi med Offline storage, geolocation, canvas, CSS3, PhoneGap etc kan skapa häftiga applikationer för mobiltelefoner och andra enheter som gör upplevelsen riktigt häftig.

Michael Mahemoff (@mahemoff) från Google, skapare av Ajaxian.com och författare till boken ”Ajax design patterns” talade också om hur HTML5 ger oss utvecklare vingar och möjliggör helt nya webbplatser och applikationer i webbläsaren. Han visade hur man på klienten kan lagra data, offline-manifest och köra avancerade javascript i bakgrundsprocesser, där olika enheter kan kommunicera och styra samma process. För mobiltelefoner är det väldigt viktigt eftersom man kan hantera ”shaky connections”, klara av avbrott för samtal och utnyttna webbläsarens fulla processor för skript och gui.

Wolfram Kriesing (@wolframkriesing) talade om ”Cross platform Mobile Apps” och lätt det är att skapa kraftfulla mobilapplikationer med hjälp av W3C Widgets och PhoneGap som fungerar för iPhone, Android, Palm, Blackberry, Nokia och Windows mobile, utan att utveckla en applikation för varje enhet.

Det finns upp till 50 olika mobila appstores för olika plattformar och olika utvecklingsspråk, varav 26 är riktigt stora. Webbapplikationer är det enda sättet att skapa applikationer som fungerar i samtliga telefoner.

W3C Widgets är ett paket av html-filer, css-filer, xml-config, ajax-bibliotek och en ikon som är zippade och omdöpt till .wgt, det skapar en widget som kan komunicera med webben som ex. facebook-dashboard-widgets.

PhoneGap är en lösning som ger webbsidor tillgång till telefonens hårdvara med hjälp av javascript och gör det möjligt att skapa riktiga applikationer av HTML, CSS och JS som kan genereras för alla olika plattformar. PhoneGap finns för att fylla gapet som finns mellan webb och OS till det att det stöds av alla telefoner och gör det möjligt att med javascript använda telefonens kamera, adressbok, gps, accelerometer, bildgalleri etc etc.

En annan väldigt intressant föreläsning var Tom Hughes Croucher (@sh1mmer) som talade om ”How to avoid the latence trap when using web services”. Han menade att det största problemet som vi som mobilwebbutvecklare har är latens. Latens uppstår vid alla typer av kommunikation speciellt trådlöst, av störande enheter, eller slöseri på bandbredd då en massa extrauppgifter skickas med varje paket. Det gäller därför att optimera bandbredden för maximal utdelning. Iphon kan t.ex. hantera 6 paralella anrop per domän, det kan därför vara en fördel att dela upp stilmallar, bilder och javascript i olika filer och på olika domäner.

Yahoo YQL är en samling av öppna APIer där din webbapp enbart behöver skicka textsträngar till Yahoos snabba servrar som sedan kommunicerar vi diverse andra servrar och sedan levererar resultatet till telefonen, vilket medför att fler anrop kan skickas snabbare utan att behöva vänta på svarstider från olika apier. Slides här

Tim Caswell (@creationix) visade tillslut hur man i Node.js kan bygga webbsajter där mobila enheter kan kopplas samman och interagera i realtid i samma webbapplikation.

Det var mycket intressant att lära sig på dessa två konferensdagar anordnade av Peter Svensson (@psvensson). Ett stort tack och jag ser fram emot nästa år, när dessa revolutionerande webbtekniker har fått ytterligare ett år på sig att mogna.

Nu är det dags för Creuna att börja utveckla mobila webbappar, så jag kan få sätta mina införskaffade ”kunskaper” i praktiken!

http://swdc-central.com/

http://www.phonegap.com/

http://www.w3.org/TR/widgets/

http://nodejs.org/

http://couchdb.apache.org/