StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Cross-browser compatibility is always an issue. It's a staple of web development, sadly, and there is no magic bullet. Luckily, the main offender, IE6, is finally starting to fade.</p> <p>A1.</p> <p>When starting work on a new site, first take every piece of content that needs to be on the page and paste it into a text file. Then put it in a rational order (thinking "If I had to use a text browser to use this page, how would I want it to be arranged...").</p> <p>Then start wrapping HTML tags around each piece of content. For each piece, think "What type of information is this?" A heading? <code>h1</code>/<code>h2</code>/etc tags. A paragraph? A quote? A table? <code>p</code>,<code>quote</code>,<code>table</code>. Essentially, use HTML tags that describe what kind of information each piece of content is. When I do this, I pay <strong>no attention</strong> to how it actually looks in the browser at this point.</p> <p>Once the content is all marked up, begin writing the CSS. If at all possible, try not to touch the markup during this step. Sometimes that isn't possible, though, and throwing a <code>div</code> or <code>span</code> around some elements is unavoidable. The less <em>meaningless markup</em>, the better.</p> <p>In my experience, this approach keeps things very clean and tidy, and makes debugging layout issues a lot easier.</p> <p>A2.</p> <p>Building the styles into your markup using the "style" attribute is fine for prototyping, but beware, the temptation to leave them there once it works is strong. The best practice is to have all of your styles in external stylesheets. I'm interested to hear any alternative viewpoints.</p> <p>Some great web standards/CSS resources:</p> <ul> <li><a href="http://www.csszengarden.com/" rel="nofollow noreferrer">http://www.csszengarden.com/</a></li> <li><a href="http://www.alistapart.com/" rel="nofollow noreferrer">http://www.alistapart.com/</a></li> <li><a href="http://www.thenoodleincident.com/" rel="nofollow noreferrer">http://www.thenoodleincident.com/</a></li> <li><a href="http://www.quirksmode.org/css/contents.html" rel="nofollow noreferrer">http://www.quirksmode.org/css/contents.html</a> (useful reference for selector-compatibility)</li> <li><a href="http://centricle.com/ref/css/filters/" rel="nofollow noreferrer">http://centricle.com/ref/css/filters/</a> (good reference for css hack compatibility)</li> <li><a href="http://www.zeldman.com/" rel="nofollow noreferrer">http://www.zeldman.com/</a></li> <li><a href="http://meyerweb.com/" rel="nofollow noreferrer">http://meyerweb.com/</a></li> </ul> <p>Hope this helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload