6 December 2007, geplaatst in CSS door Davy
Firefox gebruikers weten vast en zeker dat bij het aanklikken van een link er een dotted border rond de link verschijnt.
Als je image-replacement toepast op een link, aan de hand van een negatieve text-indent (Phark methode), dan zie je zo’n border verschijnen over de hele negatieve breedte, zoals op volgende websites:
Dit is echter heel simpel te vermijden:
h1 a {
text-indent: -999em;
overflow: hidden;
}
De overflow: hidden; zorgt ervoor dat die border slechts beperkt blijft tot het gewenste klikbare gedeelte.
9 December 2006, geplaatst in Browsers door Davy
Hoewel het nieuws zich als een lopend vuur verspreidt, wil ik toch nog eens Firebug in de kijker plaatsen. Voor zij die het nog niet weten, Firebug (1.0 beta) is een extensie voor Firefox 2, maar wat voor één!
Firebug is een onmisbare tool voor webontwikkelaars. Het stelt je in staat om vanuit de browser wijzigingen aan te brengen in je CSS, HTML en Javascript, om zo snel fouten op te sporen en te verhelpen.
Zo kan je ook de HTML broncode bekijken nadat ze is aangepast door Javascript, iets wat met de ingebouwde View Source in Firefox niet kan. Je kan de broncode doorzoeken en je resultaten laten highlighten.
Je kan AJAX requests live volgen en de headers raadplegen, hetgene vezonden wordt en het resultaat ervan. Van elk HTML element kan je de CSS stijlen bekijken, waarbij zelfs wordt weergegeven welke stijlen er later worden overschreven.
Het positioneren aan de hand van CSS wordt ook eenvoudiger gemaakt doordat alle afmetingen aan de hand van een box model worden getoond en visueel op de pagina weergegeven.
Deze Firefox uitbreiding is gewoon geweldig en over alle features kan waarschijnlijk een boek geschreven worden. Dus twijfel niet, installeren die handel, en aanschouw zelf.
Je kan alvast ook een Firebug screencast bekijken (via Simplebits).
16 November 2006, geplaatst in Javascript door Davy
De laatste paar dagen ben ik nogal intensief bezig geweest met een Javascript project. Ik had voor de gelegenheid nog snel even het boek DOMScripting van Jeremy Keith gelezen om toch stevig in mijn schoenen te staan.
Dat er verschillen bestaan tussen de verschillende browsers is voor iedereen allang duidelijk. Bij ontwikkeling met CSS vind ik dat net een uitdaging om een website perfect functioneel te krijgen in de meest courante browsers, nl. Firefox, Internet Explorer en Safari. Maar al gauw leek Javascript toch een grotere inspanning te vergen dan dat.
Om dus je scripts perfect te krijgen in elk van die browsers is het belangrijk dat je kan rekenen op de juiste tools. En waar ik het meeste hulp aan had was de ingebouwde foutconsole van Firefox. Hiermee heb ik makkelijk 90% van de fouten kunnen traceren en snel oplossen, vooral omdat er duidelijk wordt aangegeven op welke regel en in welk bestand de fout zit.
Internet Explorer geeft slechts een zielig dialoogvenster weer met daarin de melding dat er een fout is opgetreden. Wanneer je meer details ervan wil bekijken wordt je echter niet veel wijzer, en dit zowel in IE6 als IE7. Gelukkig kan je aan de hand van de Microsoft Script Debugger toch meer inzicht verkrijgen bij de foutmeldingen in de scripts en beschikken over betere debugging info. Die optie leek voor mij wel te volstaan, mede omdat ik de meeste fouten dus al kon opsporen via de Firefox foutconsole.
Safari heeft me op een bepaald moment ook wel parten gespeeld. Ook hier zit echter een Javascript debugger ingebouwd, alleen zit die nogal verscholen voor de gewone gebruiker. Via de terminal kan je echter een extra menu activeren in Safari. Open hiervoor een nieuwe terminal sessie en voer dit in:
defaults write com.apple.Safari IncludeDebugMenu 1
Als je Safari dan opnieuw opstart, dan kan je via het debug menu de optie Log JavaScript Exceptions aanvinken. De foutmeldingen worden dan in de Javascript console getoond.
Je kan dan bijvoorbeeld volgende functie toevoegen aan je javascript:
function logMsg(msg) {
if(window.console) {
window.console.log(msg);
}
}
Zo kan je op een makkelijke manier en zonder irritante alert boxes in Safari informatie opvragen, om sneller en efficiënter te debuggen.
Ik heb hiermee alleszins veel opgestoken over Javascript en het smaakt zeker naar meer. Ik voel dat hier wel een nieuwe passie in de maak is. Het worden nog interessante tijden.
25 Oktober 2006, geplaatst in Browsers door Davy
Vrij kort na de release candidate is nu ook de final release van Firefox 2.0 uitgebracht. Mozilla komt hiermee snel na de release van de Internet Explorer 7.
Mijn verwachtingen zijn vrij hoog, dus ik ga hem direct downloaden en installeren. Benieuwd wat dat gaat geven!
20 Oktober 2006, geplaatst in Browsers door Davy
Na IE7 komt nu ook nog eind deze maand de finale versie van Firefox 2. Mozilla heeft nu alleszins nog de Release Candidate 3 vrijgegeven. De features omvatten onder andere:
- Visuele vernieuwing van de interface
- Phishing bescherming
- Verbeterde zoekvoorzieningen
- Browser sessies kunnen hernomen worden
- Previewen en subscriben op rss feeds
En nog een hele boel andere features. Mij spreekt vooral het hernemen van browser sessies aan. Hoe vaak is het al niet gebeurt dat ik per ongeluk een browservenster heb afgesloten. Hiermee kan je snel weer verdersurfen waar je gebleven was.
Ik kijk alvast uit naar deze browser release !