As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Use of <hr> is still valid in HTML5 but do you think it's semantically correct and it's a part of content?
Are you using it in your projects?
I find it diffult when to add any <hr> we need to go to html code every time. using hr is mixing presentation with content.
Wordpress WYSIWYG editor doesn't have button for <hr> so if i use it then non technical client would not be able to add it if the add/remove/re-organize content.
Yup - still use it for breaking up sections of long text - not for anything else really.
If you can still see this after they so kindly closed your question - as it's to do with Wordpress really and not HR tags - here's a link that might help you out of the problem. (and to yet another mystery stackexchange that I didn't know about.
https://wordpress.stackexchange.com/questions/6033/get-a-button-for-hr-in-the-editor
I've been using this once again lately, simply because it is easy to understand what's going on for another developer reading your code:
<h1>My title</h1>
<hr>
<p>My paragraph</p>
It still is definitely more of a styling than anything else. If you want to be strict about separating style from (semantic) markup you could think of using something like with a border-bottom in CSS for example.
I think readability counts and that it works fine the way it does, even in HTML5.
That being said, I barely use it at all.
Yes, I think it's correct to use hr in html5, but only in long texts as a kind of page-break. I would never use an hr to divide functionally different sections of the page.
For me, a proper use would be in a wiki, which is primarily text based in much the same way as the earliest html pages were. It's more that many modern sites favor a design with shorter blocks or even paged text that hr tags don't seem very useful anymore.
Interesting article: http://html5doctor.com/small-hr-element/
I learned <hr> actually means "end of one section, start of another", which is the same semantically as </section><section>. Because elements like <section> already indicate this intrinsically, <hr> is more for thematic breaks, such as separating different topics within a section of prose, or between scenes in a novel. However you can use it anywhere you can use a <p>.
but I don't use it anyway.
I'd use it if there is a shift in topic or theme in your content that isn't already being marked by something else semantically (Heading or a new section).
Related
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 4 years ago.
Improve this question
The inverse question has been asked multiple times. However I could neither find any cons nor convincing proof of their complete absence.
I am all for progress and semantic documents. In fact I have started to use new semantic tags in my markups already a while ago (it feels nice!). Still I wonder if there are any (possibly obscure) caveats one should know about.
Will the rendering break (more) on that office machine which rolls prehistoric versions of IE?
backwards compatibility of css selectors like article?
strange side effects to the DOM?
...(anything)?
Some older browsers don't recognize the html5 elements. At best this means you have to define default style rules for those elements in your CSS.
In some cases you might need to apply a shim, or in this case, a shiv:
https://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/
Again, old browsers (I'm looking at you, IE) won't even recognize them as elements, so yes, it would likely change the structure of your DOM. Also, I've seen old browsers just output the html5 tags as plain text, so you see the <article> tag right there in your content.
If you happen to be in a situation where you can't support the new html5 elements, one handy workaround is to use divs and give them classes that match the desired element names. So for example you'd use:
<div class="article">
instead of
<article>
This approach has the benefit of sticking to the new "mental model", you can still think of your content in terms of articles and asides or whatnot. This approach also has the benefit of making it relatively straightforward to upgrade your code to full html5 spec at some point in the future, as all you have to do is search for the classes and replace the divs as appropriate.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Why do we have a such difficult way to add a stylesheet to a page?
I mean javascript we add like
<script src="nope.js"></script>
and inline is
<script>
alert("I refuse.");
</script>
but styles is a story apart inline is
<style>
* {
color:white;
background:white;
}
</style>
and a file is
<link href="/themes/black-wide.css?r=2408" rel="stylesheet" type="text/css">
Why do we need to use link?
isn't it more logical to use
<style src="style.css"></style>
instead of link?
Why is this like that?
EDIT
just to make it more clear.
WHY in do we need to use link instead of style to point to a css file.
When you think about it, <link> is actually much more versatile than <style> would be. You have to remember this part of the spec was defined in the early days of the internet, before CSS was even in use much (if at all).
I think the folks at the W3C, when they set this standard, intentionally left room for other uses of the <link> tag besides stylesheets. Semantically, link just means some reference to an external resource. Those uses may not have ever arisen, but there is room for them here. Perhaps the better question is why don't we use the link tag to load scripts, as well.
I'd say the reason for <link> has to do with the extra features that <link> provides for linking an external resource. For example, you can use rel="alternate stylesheet" to provide a secondary style sheet for the site. Or, media="print" for a stylesheet intended for printing only, etc.
More importantly, CSS has kind of being this evolving creature from the days of old table-based layouts. Which do you think came first <link> or <style>?
Your point on inline styles is misguided. As you can write an inline style like:
<style>*{color:white;background:white;}</style>
The extra lines and spacing is just to aid in readability. The same can be said about inline javascript, so long as proper syntax is used one could put as many spaces and line breaks in as they wish. For an example:
<script>
alert("I refuse.");
</script>
Would work in the same way as:
<script>
alert(
"I refuse."
);
</script>
As for the syntax of using <link...> rather than a more simple <style src...> comes back to W3C and the standards that they have set. In time these standards may change to allow a shorter notation, but until that happens (if it ever does) its a minor inconvience we have to live with.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
i have taken over a website that has tons of css files and lots of inline css as well. Is there any tool that can show me a visualization of how this stuff is organized as i have a strong feeling that. Many pages are bringing in more css than necessary
Also, i want to remove all the inline formatting as well into css files. Is there any refactoring tool that does even this by itself?
IE8 dev tools can show you all CSS inheritance tree (including files where this particular style is defined in)
Firefox has tons of plugins that can do the same.
This is not a direct answer to your question - I don't know of a true refactoring tool for CSS. One that I've used to create and preview CSS easily is TopStyle - I'm on v3.5 Pro, and they've got v4 out now. There may be better or less expensive alternatives out there; I'm not an expert.
You might also want to check out Firebug: http://getfirebug.com/
Dreamweaver, it can convert inline css to external css file.
also it can view all css files and its rules in a outline view, and you can easily rename all of it.
The Dust-Me Selectors Firefox extension could help you find CSS that isn't used at all, it's a good first step.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm trying to improve the style of a website. I'm looking for some examples of beautifully styled HTML elements (tables, lists, headings, etc.) that I can draw on for inspiration, or just copy and paste verbatim (if that's permitted).
Some explanation of how the styling was achieved would be nice, but is not absolutely necessary, as I can always use Firebug to reverse engineer the design. Ideally the designs should:
Be compatible with all modern browsers (which excludes IE6 IMO)
Use little or no JavaScript
Be valid XHTML transitional/strict
EDIT: Ideally, the site(s) should provide an easy way to view a list of styles for a particular element type (ordered list, table, heading, etc.)
Thanks,
Don
The best recource for specific elements and types is in my opinion by far http://www.patterntap.com.
There you browse categories like lists and tables.
alt text http://img514.imageshack.us/img514/2662/afbeelding1eu.png
For lists, Listamatic immediately comes to mind.
For everything else, I can only think of CSS Zen Garden.
Open Source Web Design has a lot of stuff available. You can see it at: oswd.org
CSS Play, by Stu Nicholls, and, of course, A List Apart are two of my own favourites.
The folks at Zen Garden think they're pretty hot. There's a large collection of different designs of the same HTML text to be admired there. Maybe you can learn something from the masters!
http://www.dynamicdrive.com/style/
http://css-tricks.com/
http://www.css-website.com/
http://cssmania.com/
http://cssline.com/
http://webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php#gradients
http://www.webcreme.com/
http://css-warfare.com/
http://www.cssbeauty.com/
http://www.boxedcss.com/
http://css.maxdesign.com.au/index.htm
http://www.csselite.com/
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
http://www.designmeltdown.com/default.aspx
http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/
http://inspectelement.com/articles/the-ultimate-a-z-of-the-best-design-and-development-related-sites/
For the inspirational sites, I use Firefox + Firebug. 95% of the sites listed comply to web standards, so I can peek at the code and know it's OK to use.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am looking for a bells and whistles CSS framework. I have found a number online that deal with "grids", and some that deal with "typography" and others that deal with "resetting".
What I have not found is something that will give my web applications a consistent reusable style or theme.
I guess it would have to have a number of predefined elements that do things, for example:
div.boxed {...}
And then a number of themes or plugins that provide these in a consistent way. Javascript toolkits like ExtJS, YUI, and also GWT have their own skinability, and I guess this is the featureset that I want, but independent of any Javascript library.
(Open source would be best, but we don't mind paying)
Edit: 5 good answers, but I have seen all those frameworks, and they are not enough of what I am looking for. Perhaps what I am looking for doesn't exist. Or I haven't explained properly. I will give them a good going over and see.
Compass really changes things for you.
In addition to providing everything from grids to mixins like horizontal-list, it's built on top of SASS so you get stuff like reuse and variables and other such things.
It makes things you don't even realize are painful pain-free. Definitely worth looking over.
I am a fan of Blue Print CSS, their reset and grids styles are a very good starting point. Especially if you care about having clean html and css.
960gs is good for layouts.
Just use YUI Grids, it's as good as it gets :P
One of the long term plans for compass is to create tools for designers to share designs for things like shiny buttons or even whole pages. It's actually possible right now but the mechanims are not well documented yet. But I'm glad you like it, please feel free to bug us on the mailing list.
I'm a huge fan of BlueTrip which bills itself as, "A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija's print stylesheet, 960.gs's simplicity, and Elements' icons, and has now found a life of its own."
I second YAML. It's highly versatile, well-documented, has a builder tool etc. The forms component does some annoying hover effects which I always disable but otherwise YAML gives you a good basis to build your own framework, possibly with the help of LESS, a tool that you'll soon find indispensable.
I found YAML (Yet Another Multi-columned Layout) to be an excellent, comprehensive, highly adaptable all-rounder.
Emastic lightweight, em based, fluid and fixed columns.
There is also LESS - LEaner cSS.
Provides the following features:
Mixins
Variables
Nested selectors
Operations