Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm originally an iOS and mobile engineer and recently, I've been getting back into web development. In an attempt to dive as deep as I can into it, I've learned as much as about things like Webpack, more advanced SCSS, React, Redux, etc. After all my research, I'm still left with one burning question.
Why should I use HTML, specifically HTML5, elements in my markup vs creating all custom elements (such as a header using divs not header, wrapping dates in <time />, nav elements, etc). As an iOS engineer, I often find that design requirements make me build custom views with little to none built in view components and if I do, they're often my own components I've built from UIViews (equivalent to div, ish). In web development, unlike mobile, there are so many built in elements and I assume there's reason for that.
To ask it another way:
1) Are there specific performance advantages to integrating more HTML5 elements into my markup?
2) Are the advantages purely semantic? That is to say does using the built in elements more provide my website with better semantics and readability at first glance?
3) Is there an accessibility advantage to using built in elements?
It seems that this would be the primary reason to use HTML5 elements. Supporting accessibility is really just an extension of good user experience and that's always worth implementing.
4) If I do use HTML5 standard elements more, wouldn't that introduce some risk into my projects?
By risk I mean introducing unintended behavior. If I use a all divs and only divs in my markup, I have predictable element behavior across the board, especially when it comes to styling. All divs are equal in that respect. If I use a HTML5 element that I haven't read up on fully, would I not risk injecting unwanted (not necessarily harmful though) behavior?
I see your point and I have never really put much thought into this. However after looking through some articles and sources the general consensus is that there is no evidence that using custom elements causes any performance issue's over the standard HTML elements. However there is a few sources that say stick to some sort of guide line for the purpose of semantics correctness.
Are there specific performance advantages to integrating more HTML5 elements into my markup?
1) Not particularly, there is hardly any performance problems with markup that I have run into on multiple platforms.
Are the advantages purely semantic? That is to say does using the built in elements more provide my website with better semantics and readability at first glance?
2) Yes and no. Following the HTML5 element markup does make it easier for other developers to find a bug or to refactor the markup at some point down the line. And no HTML isn't purely for the semantic side of things although semantics do make things easier in a verity of different ways, in terms of SEO and how the browser reads the site for screen readers is vitally important to creating a fully accessible site on the web.
Is there an accessibility advantage to using built in elements?
3) HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class.
If I do use HTML5 standard elements more, wouldn't that introduce some risk into my projects?
4) I haven't come across this myself so I have no experience on this potential problem.
I would say if you want go for it, but keep in mind the advantages of using mainly HTML5 element's and the disadvantages of using custom element's. I personally most of the time use completely standard HTML5 element's but sometimes I might use my own custom element's for a situation that seems it would benefit from such as makes better semantic sense to write my own element for it versus using an element that might cause confusing later down the line to me and other developer's.
I found this very interesting:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
He avoid using horizontal margin and paddings to avoid problems with IE. I think he "fakes" padding using relative positioning.
Have you ever done something like this?
I'm a missing a common trend against IE hacks?
Does this practice have any drawbacks?
That example is outdated.
Problems with margins and paddings like that were a problem with the broken box model of IE5. In later versions of IE you will only get that broken box model if IE is in quirks mode. That's something you should be avoiding at all cost. Use the right doctype!
The example you linked actually relies on that broken box model. He has an updated version that doesn't:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
But what kind of IE problems are you actually trying to address? Do you specifically want a 3-column layout like in the page you linked to? Do you want general solutions for IE layout problems? Or do you want to be able to forget about IE altogether?
The most important thing to know about when dealing with layout and IE6/7 is its hasLayout property. Read On having layout for all the details on that.
If you are specifically looking for tools that can help you build complex layouts compatible with all browsers, you could have a look at grid frameworks like YUI Grids or Blueprint. But I can't say I'm a fan of those, since they tend to result in unsemantic div soup.
If you don't mind a little (experimental) JavaScript to fix up your entire website automagically, you could give IE7.js a try. I've used this, though it definitely has its quirks and limitations, so use at your own risk.
To come back to your original question, though, relative positioning is no ultimate solution for anything, it's just one of the tools in the box. Understand it and use it when it's appropriate. See, for example, Sitepoint's CSS layout and formatting reference. And as dry as it may be, I find the CSS specification to be invaluable, especially the chapters on the visual formatting model details.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Although, I know that a lot may depend on a particular web site, what is the mainstream? =) And also, what do you think of implementing CSS table-based layouts while IE6 and 7 are in use?
I use CSS floating at the general level, tables for tabular data, and absolute positioning if necessary.
i personally use a mixture of them all. For grid like data, I favor tables. For advanced layering, I use absolute positioning.
For website layouts I use a mix of CSS layout techniques. Depending on whether I am building a fixed-width site or elastic-width site the CSS techniques differ somewhat.
But, when I want to create any layouts for e-mail marketing then table layouts is the only thing I work with. And now with Outlook 2010 still supporting the Word HTML Renderer I don't think I will be using any CSS layouts for e-mails anytime soon.
As for CSS table layouts, you can use conditional comments to provide a seperate CSS style sheet for IE 6 and 7. Something like this:
<!--[if lt IE 8]
//different style sheet goes here.
-->
I would recommend reading the following two books:
Bulletproof Web Design, Dan Cederholm
Everything you know about CSS is Wrong, Rachel Andrew & Kevin Yank
The first book will show you CSS layout techniques for both fixed and fluid designs, whereas the second one will provide information about CSS table layout, including how to deal with browsers that don't support it.
Hope this information is helpful.
Floating combined with absolute positioning.
I never use tables, perhaps mostly because I got tired of them back when I had to use them because there was no alternatives.
Tables are not semantically appropriate for making a layout. The "correct" way to do things isn't anything you said in particular.
You should be using semantically-appropriate tags: header tags for titles, div tags for sections, lists for navigation/lists, etc.
Once you have this set up, style the elements in CSS, adding divs, spans, ids, and classes as appropriate. Floats, absolute positioning, etc. should be used as you see fit.
Things are dependent.
I want to put is that you should know what is needed.
One thing Div based layout renders fast than table base. There are some things that might affect your page render time in browse Like use external CSS only etc.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
For instance:
I still do layout with tables and not with just CSS. I haven’t still found out a way to correctly present data aligned and tabular.
I don’t know the difference between display: none and visibility: hidden (well, I know it now. but there are many cases like- padding, margins, overflows etc)
I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a # and not a class.
Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
I don’t know what this picture in firebug is conveying (by the way, firebug is my savior. Life would have been impossible without Firebug)
Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.
I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.
I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.
Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.
Check out Designing With Web Standards by Jeffrey Zeldman.
Here are some general rules to live by:
Tables are good for tabular data. If the data you're presenting belongs in a table, don't go out of your way trying to make a grid out of <div>s. Doesn't make sense.
As far as layout is concerned, use <div> tags, stay away from tables. Get to know the float property well. With CSS3, there are going to be new, improve standards to the display property. Learn them.
display: none completely removes the element from the viewport. Conversely, visibility: hidden retains the whitespace that the element would have otherwise taken up. In both cases, the element remains in the DOM.
General rule of classes and IDs. Page elements and IDs should have a one-to-one relationship per page. For example, #Column1, #Column2, #Footer, #Header. Page elements and classes, on the other hand, should be a many-to-one relationship, like: .container or .navLink. Use classes when you know you're going to be using a particular element quite a bit.
Think in terms of efficiency. The less style rules you have, the more quickly your page will load and the easier style issues will be to debug.
I have about a million other things to say but that should get you started.
For layout-driven CSS, be sure to check out Everything You Know About CSS Is Wrong. It's a bit cutting edge, since IE 7 doesn't support display: table (pity, I know), but it does cover traditional layout CSS techniques like floating and absolute positioning, and provides a good transition from table-based layouts to CSS ones. I highly recommend it.
I don't know if you're building off of any dynamic language or if you're just coding raw HTML, but you should also look at using SASS in your projects, as I think it helps force you to pay more attention to inheritance. Otherwise, reviewing more "rudimentary" tutorials (like CSS for Dummies) might actually be helpful, as they go over a lot of CSS's fundamental principals in detail.
Lastly, CSS works best when you have semantically correct (x)html underneath the hood. In my opinion, it's easiest to see and learn "good" CSS when you have great, semantically correct html underneath. Here's a good overview of when to use what tags. Generally, I find it best to write my content with no regard what-so-ever to how it will look later, then use CSS later to make it gorgeous.
As always, you can pick up lots of neat tips and tricks at CSS Tricks, which have always helped me learn more about the correct usage of the language (like when I learned about overflow: auto for contained floating elements! Genius!).
Hope that helps!
Visit CSS Zen Garden to see what you can do only with CSS.
Visit W3 schools and follow the tutorial. It might seem simple for you, but you will learn the basic stuff.
Visit some sites, such as A list Apart to see how to do things and learn tricks.
See if a CSS framework suits your needs (such as 960 Grid).
I'm assuming you've installed Firebug?
Also, http://www.doctype.com might get more relevant results.
Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.
Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.
Some thoughts on what you posted.
A Master Reset style sheet will
help with browser differences.
And Tabular data should use tables.
It's layouts that should avoid table
tags in favor of css.
Plenty of people here give good advices. I'll just add two more:
First, try to write valid (X)HTML. You can easily test your HTML code using W3C's HTML validator. Focus mainly on content, not on style.
Second, try to write valid CSS, preferably in a separate .css file. Avoid using the style attribute. (This part can be hard, if you want to support certain old browsers from Redmond). You can test your CSS using W3C's CSS validator.
Read CSS: The Definitive Guide by Eric Meyer. He explains why CSS was created, how it works (according to the standards), and will give you the background to understand the finer points. It also makes a good reference.
Experiment in Firebug
I don’t know what this picture in
firebug is conveying
Firebug itself can help you there. Do this:
Create a div with some text in it.
Use CSS to give it padding: 5px; margin: 5px; border: 1px solid black;
Examine it in Firebug, as you show in your question.
Click on any one of those numbers in the box model it's showing you, and start pressing the up and down arrows (or type a different number).
See how it changes in real time? This is one of the best things about Firebug: it lets you tweak without reloading, then modify your stylesheet when it looks right.
Keep doing this until you understand how padding, margins, and border work.
I think you should use, for your layout needs, one of the so called "css frameworks" (960.gs for example).
They are fast and reliable enough to build cross-browser layouts and also easy to read and understand as well, so you can learn all the good practices while you are coding.
CSS are easy and aren't a real programming language: don't be afraid of the word "framework" ;)
You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.
And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.
http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ref=sr_1_1?ie=UTF8&s=books&qid=1255629419&sr=8-1
http://www.amazon.com/More-Eric-Meyer-Voices-Matter/dp/0735714258/ref=sr_1_1?ie=UTF8&s=books&qid=1255629449&sr=8-1
http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X/ref=sr_1_1?ie=UTF8&s=books&qid=1255629462&sr=8-1
Well, I will address some of these issues as best I can.
The difference between display:none and visibility:hidden is when the display is set the space for that item is not reserved. So imagine it as when the display is set the item is 'gone' off the page. Whereas if you are using the visibility option, the elements are on the page, in their place just invisible. Did I explain that clearly? Hopefully, that makes sense for you.
As far as the padding, border and margins, this is all referred to as the CSS Box Model. The information is contained as the element, its padding, border, then its margins. So padding is the distance between the element's content and its border whereas the margin is the distance between the border and the neighboring element. Again, I hope this helps clear this up for you a little bit.
Transitioning to CSS is sometimes tricky but well worth it.
Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.
The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.
Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.
Designing with webstandards
CSS Mastery
Bulletproof webdesign
for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.
Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
Are you putting your stylesheets at the top, in the <head> section?
Are you declaring explicit sizes for images, or does the browser have to guess, then rearrange things when the image shows up?
Depending on your learning style, I might recommend going straight to the source: the definition of CSS. You can find each of the various specs here: http://www.w3.org/Style/CSS/. While the specification doesn't really cover specific browser quirks (if it did, they wouldn't be quirks, would they?), it does a really good job (for me) of explaining how each piece works.
I will tell you my secret: follow this two classic tutorials
Listutorial
Floatutorial
And you'll know 80% of what you need to know about CSS.
30 Websites to follow if you’re into Web Development
http://htmldog.com/ is, in my opinion, one of the definitive resources to learning front-end web development the proper way.