Hoe cool is dit, eindelijk een makkelijke manier om custom fonts op je site te gebruiken:
Het volledige artikel op nettuts+
Less
More
Archive for the 'Html' Category
HTML 5 lijkt misschien nog erg ver weg maar je je kan er al stukjes uit gebruiken.
Met dank aan NetTuts+
Een interessante kijk op browser support:
If a web browser is defective, causing errors in the display or performance of the page, should the page developer struggle to hide the browser’s defects, or should the defects be revealed in hope of creating market pressure to force the browser maker to make good? By which approach is humanity better served?
Voor steeds groter groeiende groep webdevelopers is dit antwoord nee.
Ik ben het wel eens met de auteur van het gelinkte artikel. Zijn mening is wat gematigder dan de quote hierboven. Op de vraag “Als je met de CSS3 tag “box-shadow” de look en feel van een site drastisch kan verbeteren maar deze wordt niet ondersteund door IE, zou je deze dan toepassen?”. Zijn antwoord hierop: Ja.
Het idee hierbij is dat gebruikers die een browser gebruiken die deze tag wel toepassen zien de versie met schaduw. Gebruikers die een browser gebruiken die de tag niet ondersteund, zien de schadow niet, maar weten eigenlijk ook niet wat ze missen. En functioneel gezien is de website hetzelfde.
Ik kan me hier goed in vinden. Tevens biedt het webdevelopers de mogelijkheid te experimenteren met de nieuwe mogelijkheden van CSS 3 en op zo dus de vooruitgang op webgebied te stimuleren. Want als we moeten wachten totdat alle browser CSSs 3 ondersteunen dan zitten we over 5 jaar nog steeds te klooien met CSS 1.en hack om de boel te laten werken in IE.
Het tonen van verticale tekst via CSS is alleen weggelegd voor IE Browsers middels de volgende CSS3 regels:
writing-mode: tb-rl; filter: flipv fliph;
Dit is een mooie manier om bijvoorbeeld tabel headers verticaal weer te geven. Maar helaas wordt deze CSS regel tot nu toe alleen toegepast in IE browsers. Om dit ook in non-IE browsers mogelijk te maken, gebruikt men vaak dynamisch gegenereerde images met de gewenste tekst.
Dit werkt natuurlijk ook maar het zorgt wel voor extra belasting op de webserver, tevens is dit lastig te onderhouden. Op zoek naar een betere oplossing, kwam ik een oplossing tegen die gebruik maakt van een statisch svg object met daarin een javascript welke de verticale text zet. Dit is al een betere oplossing alleen het aanroepen van de javascript binnen het svg object is niet erg netjes. Daarnaast moet op elke plek waar je verticale tekst wil gebruiken de svg toevoegen via de <embed> tag.
De oplossing voor dit probleem heb ik gevonden door met behulp van de jQuery SVG plugin deze svg zelf te genereren:
function SetVerticalText() {
var verticalTexts = $(".verticalText");
verticalTexts.each(function() {
var text = $(this).text();
$(this).text("");
if (!$.browser.msie) {
$(this).append("<div class='svgContainer'></div>");
$(this).find(".svgContainer").svg();
var svg = $(this).find(".svgContainer").svg('get');
svg.text(null, -48, 12, text, { transform: 'rotate(270, 50, 50)', 'font-family': 'Arial', 'font-size': '10', 'letter-spacing': '2' });
}
else {
$(this).append("<span class='verticalTextSpan'>" + text + "</span>");
}
});
}
Hier bij geef ik alle tekst elementen die ik verticaal wil weergeven de CSS class .verticalText bijvoorbeeld in mijn table headers:
<table cellpadding="0" cellspacing="0" class="statusTable width700" > <tr> <td class="labelCell"> NFP-SC </td> <td class="verticalText"> Digitaal initieel </td> <td class="verticalText"> Digitaal ingediend </td> <td class="verticalText"> Papier ingediend </td> <td class="verticalText"> Direct afgewezen </td> </tr> </table>
Wanneer ik nu de SetVerticalText() aanroep, wordt er voor alle non-IE browsers een <div class=’svgContainer’></div> toegevoegd. Vervolgens wordt er middels de jQuery SVG plugin een svg object aangemaakt met daarin de verticale tekst.
Voor IE-browsers wordt er een <span class=’verticalTextSpan’></span> tag toegevoegd met daarin de verticale tekst.
Een demo van deze techniek.
Het maken van goede en overzichtelijke formulieren vaak een tijdrovende klus. Smashing Magazine heeft een aantal formulieren op een rijtje gezet die je hierbij kunnen helpen. De formulieren voldoen aan een of meer van de volgende eisen:
- accessible
- xhtml compliant
- css-based
Dankzij het mooie werk van Alex Gorbatchev zal de source tekst op dit blog er nu een stuk beter uitzien.
public partial class Login : PageBase
{
#region Properties
public override string ContentTitle
{
get
{
return ResourceService.GetWebResourceString("LoginContentTitle");
}
}
public override string PageExplanation
{
get
{
return ResourceService.GetWebResourceString("LoginPageExplanation");
}
}
#endregion
#region Events Handlers
protected void Page_Init(object sender, EventArgs e)
{
FormsAuthentication.SignOut();
}
protected void Page_Load(object sender, EventArgs e)
{
}
#endregion Events Handlers
}
Ik zit deze week wel heel erg in de IE bugs. Zo kreeg ik vandaag een access denied error wanneer een gebruiker een ongeldig/niet bestaande bestandsnaam invoert in een upload veld. Dit is mogelijk omdat in Internet Explorer het invoerveld (het veld naast browse knop) de door de gebruiker bewerkt kan worden.
Dit is op te lossen door tijdens het keydown event van het uploadveld het click event uit te voeren waardoor de gebuiker gedwongen wordt om het upload dialog scherm te gebruiken (jQuery):
$(document).ready(function() {
$("input[type=file]").keydown(function(event) {
$("input[type=file]").click();
return false;
});
});
Ik heb vandaag eindelijk een oplossing gevonden voor die irritante overflow bug in IE. Deze bug houdt in dat er een horizontale scrollbar wordt getoond terwijl deze helemaal niet nodig is:
Josh Stodola heeft de oplossing door een IE specifieke tag toe tevoegen :
Danny chen legt op zijn blog een aantal manieren uit om een asp.net menu structuur te renderen middels UL tags ipv een TABLE zoals het standaard asp.net control dit doet.
Het zetten van de div height in IE6 is niet zo simpel als je zou denken. Ik wilde een dunne lijn maken mbv een div met een hoogte van 1px :
div.footerBar
{
background: #FF6600;
width: 100%;
height: 1px;
}Dit is voldoende voor firefox en IE 7. Helaas kreeg ik in IE 6 een lelijke dikke balk. Dit is op te lossen door overflow:hidden toe te voegen:
div.footerBar
{
background: #FF6600;
width: 100%;
height: 1px;
overflow:hidden;
}Een nettere oplossing is zoals Wilbert al zei, gewoon een hr tag gebruiken met de volgende css:
hr
{
border:0;
height:1px;
color:red;
background:red;
}