2009 27 juli 2009

User Agent Style Sheets: Mystery marges in Google Chrome

Gisteren, net als elke andere "Ground Hog Day", was ik bezig met een aantal CSS / tabelloze lay-outs. Alles was goed gaat in IE 7, FF 3 en Chrome, tot plots zag ik een aantal niet-negeerbare marges alleen gezien in Google Chrome. Hoewel heel vreemd en Worring, Het was een nieuwe bug / issue dat ik overkant gekomen, was er eindelijk wat pit in mijn alledaagse werk. Sad (maar leuk) het werd vastgesteld binnen een paar minuten van de sonde ...

Kortom, het zag eruit als Google Chrome negeerde mijn CSS Resets (marge: 0px). Eigenlijk werd veroorzaakt door de user agent stylesheet (-webkit-padding-start: 40px). Dus de oplossing was om deze stijl te resetten door het instellen van padding: 0 de misdragen elementen.
Een goede manier om dit probleem te voorkomen op elk element is het gebruik van een wereldwijde CSS Rest als volgt

* {Margin: 0; padding: 0;}

Wat is User Agent Style Sheets (Specification)?
Het volgende fragment is afkomstig uit http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link om meer te lezen op de User Agent Style Sheets

CSS 1 introduceert het idee door te stellen dat elke User Agent (UA, vaak een 'web browser' of 'web client') wordt een standaard style sheet dat de documenten presenteert in een redelijke hebben - maar misschien wel alledaagse - manier. CSS 2 zegt dat in overeenstemming user agents moet een standaard style sheet van toepassing zijn (of zich gedragen alsof ze deden) en dat een user agent de standaard style sheet moeten de elementen van de taal van het document te presenteren op een manier die algemene presentatie verwachtingen te voldoen voor het document taal; CSS 3 is waarschijnlijk van dezelfde geest.

Omdat de CSS-specificaties laten het aan implementaties of er een "echte" style sheet voor de standaard weergave gebruiken of niet, het is niet verwonderlijk dat je niet een standaard style sheet in de installatie elke browser de map te vinden. In tegenstelling tot Microsoft's Internet Explorer en Opera, bijvoorbeeld (en voor zover ik weet), Gecko browsers zoals Firefox en Netscape Navigator (zoek naar "html.css"), maar ook Konqueror maakt het tamelijk eenvoudig om hun standaard styling begrijpen.


2008 02 augustus 2008

Het instellen van de DOCTYPE in XSL

Vorige week heb ik een progessieve HTML / CSS-lay-out voor een klant, getest in IE6, IE7 en FF 3, leek prima ... tot! de lay-out ging verderop in de manufacting cyclus. Het is mislukt. Pagina-indeling elementen ging gewoon over de plaats als de HTML-lay-out werd omgezet in XSL en XML toegepast ... Bummer!

Kan niet ok slapen in het weekend, in afwachting van maandagochtend, als ik moet deze sh ** op te lossen. Maar nu met een beetje experince in het omgaan met dit soort situaties (Browser Quirks, ik bedoel), wist ik dat het te maken had met niets anders dan DOCTYPE .... en het was ...

Het probleem:
U wilt controle over het DOCTYPE, want jullie transformatie wordt een standaard DOCTYPE expliciet op te nemen, en je lay-out zal worden voor een toss.

De oplossing:
XSLT specs biedt uitvoermethoden het instellen van een van de DOCTYPE naar keuze. Ook voor ons UI ontwikkelaars, zouden de onderwerpen van belang kunnen zijn HTML-uitvoer methoden en XML-uitvoer methoden .

Nou! voordat je verveeld, hier is de oplossing.

Voor bijvoorbeeld, als je de volgende DOCTYPE in je HTML-versie:. -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dan in de XSL u zou hebben om de volgende zijn: -

<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/loose.dtd" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" />

en tot slot! Zorg er wel voor uw XSLT-uitgang gehoorzaamt aan de DOCTYPE u hebt gekozen.


NDK huis | Te drukken | Het uiten van Smaak | Het uiten van Penmenship | Het uiten van Awe | Het uiten van Myself