web-standards | 易学教程

What is the best method to code physical address in html?

阅读更多关于 What is the best method to code physical address in html?

问题 What is the best method to code physical address in html ? in Semantic, Accessible and SEO way 回答1: Use a Microformats vCard <div class="vcard"> <span class="fn">Gregory Peck</span> <a class="org url" href="http://www.commerce.net/">CommerceNet</a> <div class="adr"> <span class="type">Work</span>: <div class="street-address">169 University Avenue</div> <span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94301</span> <div class=

Negative Margins, Hack or Not?

阅读更多关于 Negative Margins, Hack or Not?

问题 I've come across various posts where people are stating that negative margins are hacks. Thus I've strayed away from using them with exception to particular cases when I can justifiably use them, like throwing text off the screen with margin:-9999px Question, are negative margins a hack and when is it right to use negative margins? I've seen them used in the 960 Grid System with, .push and .pull , any other cases where they are justifiably usable?!?! 回答1: Negative margins are allowed based on

How to remove data-* attributes using HTML5 dataset

阅读更多关于 How to remove data-* attributes using HTML5 dataset

问题 According to the dataset spec, how is element.dataset meant to delete data attributes? Consider: <p id="example" data-a="string a" data-b="string b"></p> If you do this: var elem = document.querySelector('#example'); elem.dataset.a = null; elem.dataset.b = undefined; elem.dataset.c = false; elem.dataset.d = 3; elem.dataset.e = [1, 2, 3]; elem.dataset.f = {prop: 'value'}; elem.dataset.g = JSON.stringify({prop: 'value'}); the DOM becomes this in Chrome and Firefox: <p id="example" data-a="null"

Strict doctype - form and input element

阅读更多关于 Strict doctype - form and input element

Does anyone know the reasoning behind the strict doctype not allowing input elements to be direct descendents of a form element. I find it annoying that i have to wrap a submit button which is a block level element inside another block level element say a fieldset or a div. However, I cannot find an answer anywhere as to why this actually is. So if you try to put an input directly into a form without a container element, and validate under xhtml 1.0 strict, you get this warning: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div",

Adding ID attribute to all HTML elements of a web application?

阅读更多关于 Adding ID attribute to all HTML elements of a web application?

问题 Currently I am building a web portal using RoR, MySQL, HTML, CSS and jQuery etc., I got a request from my automation test engineer to add ID attributes(if possible NAME attribute also) to all the elements of my application. I am confused to do this perhaps I am not sure whether it is a good practice or not, so can anybody please help me with specific disadvantages/issues with adding ID attributes to all elements of my application. Thanks, Siva 回答1: To do reliable frontend tests, you need to

HGROUP element removed from the HTML5 Specification. What alternative technique can be used instead?

阅读更多关于 HGROUP element removed from the HTML5 Specification. What alternative technique can be used instead?

问题 As some of you would of heard the hgroup element is being removed from the HTML5 Specification. (For more info, see the W3C HTML Working Group's decision on request to drop hgroup from HTML5 on the W3C's Public Mailing List archives.) Now I'm currently working on the redesign of a site using this tag that creates a way of adding a sub heading. My current thoughts are to just add another hX tag under the main header, but I'm not sure if this would be semantic enough to do so. <h1>Darren Reay<

What is the best method to code physical address in html?

阅读更多关于 What is the best method to code physical address in html?

What is the best method to code physical address in html ? in Semantic, Accessible and SEO way Use a Microformats vCard <div class="vcard"> <span class="fn">Gregory Peck</span> <a class="org url" href="http://www.commerce.net/">CommerceNet</a> <div class="adr"> <span class="type">Work</span>: <div class="street-address">169 University Avenue</div> <span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94301</span> <div class="country-name">USA</div> </div> <div class="tel"> <span class="type">Work</span> +1-650-289-4040 </div> <div

How to remove data-* attributes using HTML5 dataset

阅读更多关于 How to remove data-* attributes using HTML5 dataset

According to the dataset spec , how is element.dataset meant to delete data attributes? Consider: <p id="example" data-a="string a" data-b="string b"></p> If you do this: var elem = document.querySelector('#example'); elem.dataset.a = null; elem.dataset.b = undefined; elem.dataset.c = false; elem.dataset.d = 3; elem.dataset.e = [1, 2, 3]; elem.dataset.f = {prop: 'value'}; elem.dataset.g = JSON.stringify({prop: 'value'}); the DOM becomes this in Chrome and Firefox: <p id="example" data-a="null" data-b="undefined" data-c="false" data-d="3" data-e="1,2,3" data.f="[object Object]" data.g="{"prop":

Rem-Based Layouts, Zooming on chrome is inconsistent, PX vs REM

阅读更多关于 Rem-Based Layouts, Zooming on chrome is inconsistent, PX vs REM

问题 I've been wracking my brain over this one, google searches don't really have much in the way of help or even documentation of this problem but it's greatly affecting my current conversion to a mobile-friendly design. Everywhere I go, everyone's touting using rem -based layouts as the new gold standard, and on the surface the virtues of this approach seem ideal (full accesibility support for both reference pixel based scaling and font-size scaling to support many DPIs and many screen sizes /

What is semantic markup, and why would I want to use that?

阅读更多关于 What is semantic markup, and why would I want to use that?

Like it says. Using semantic markup means that the (X)HTML code you use in a page contains metadata describing its purpose -- for example, an <h2> that contains an employee's name might be marked class="employee-name" . Originally there were some people that hoped search engines would use this information, but as the web has evolved semantic markup has been mostly used for providing hooks for CSS. With CSS and semantic markup, you can keep the visual design of the page separate from the markup. This results in bandwidth savings, because the design only has to be downloaded once, and easier