This question already has answers here:
What is data- attribute used for in HTML? And, What are the common combinations with data attribute? [duplicate]
(4 answers)
Closed 8 years ago.
What are these types of attributes called?
data-role=
data-theme=
data-position=
data-display=
Those specific attributes are coming out of Phonegap but I've seen these in other web frameworks. Are these custom or part of CSS3?
From the Mozilla Developer Network:
HTML5 is designed with extensibility for data that should be in the HTML, but not visible. data-* attributes allow us to store extra information on standard, semantic HTML elements without polluting the class name.
The syntax is easy. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:
<article
id="electriccars"
data-columns="3"
data-indexnumber="12314"
data-parent="cars">
...
</article>
Related
This question already has answers here:
How to apply CSS to iframe?
(28 answers)
Closed 9 years ago.
Is there a way to CSS-style a 3rd party iframe? For example, with a Twitter widget, I would like to change the font size.
How would I do this?
I don't think you do... For all intents and purposes that iframe is another document and is completely outside of your control (as long as it's 3rd party and / or stored in another domain).
In the case of twitter you can always configure the widget itself when you start it but as long as you're trying to access / alter most properties of the document inside the iframe, you're sold.
Long story short: as far as I know you're dependant on whatever tools the 3rd party provides you. Of course, you can always do hacks (intensive curl calls, parsing and rewriting) but that would be like killing a fly with a really big cannon.
What are you exactly trying to achieve?. Maybe there's a way the 3rd party allows you to...
This question already has answers here:
Create a variable in .CSS file for use within that .CSS file [duplicate]
(13 answers)
Closed 8 years ago.
Im working on a website and my boss wants me to use CSS variations and I dont know what he is talking about.
Let's say I have 20 different elements using #7d2d39, rather than having:
background-color:#7d2d39
color="#7d2d39"
All over the style sheets he wants me to call it using:
background-color:red1"
color="red1"
and somewhere define what "red1" is that way we can globally change one hex color vs. changing it 20 times? It makes sense as I type it, but I dont think this exists.
You'd need to use something like LESS which supports dynamic stylesheets and variables.
CSS preprocessors are a way of making CSS more "programmatic" by using things like functions and variables. The two most popular are:
SASS
LESS
And then there's others:
Google Closure Stylesheets
Stylus
And there's projects like Twitter Bootstrap which uses LESS. There's nothing directly usable in CSS at this moment. It all requires either a JavaScript or a backend processing to convert the LESS/SASS file into CSS.
But it can help developer keep code organized and cleaned and make managing updates faster.
I've never heard of the term "CSS Variants" before but I would suspect your boss might have meant "CSS Variables", which is more what you're describing. But variables are only a part of the functionality preprocessors offer.
I hope that helps!
I think he is talking about css variables but this is just a draft. LESS and SASS are options, too.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
i know that using tables as layout is a big problem..Why don’t professional web designers use tables for layout anymore? and what are the alternatives in CSS that i can use and will be the best alternative to tables??
1) as soon as a browser sees an opening table tag, it will stop rendering until it sees the closing tag, since it has no way of even guessing what the table structure will look like. Because of that, tables will dramatically increase the wait time between when the user starts the request, and when they can actually use your page.
2) tables require 3 nested tags to define a cell, which is a hell of a lot of noise in an already incredibly verbose language (xml)
3) semantically, a table is for tabular data. using it for layout means your html doesn't make sense when you read it.
Discussed here - Why not use tables for layout in HTML?
CSS doesn't provide 'alternatives' to tables. It is used to style HTML elements including tables.
Try to learn using div tag and giving style to it using css..it has more effect in look
I would definitely suggest using CSS and XHTML to layout pages.
I think there are far too many benefits to go into here. Ranging from accessibility, SEO, ease of coding to future proofing. I think blog posts and articles on the subject will be able to provide more information on why and how you should use CSS instead of table to layout pages.
One book I would suggest is Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm This book will tell you everything you need to know about using CSS and HTML in a web standards compliant way.
One thing to keep in mind is that HTML5 is starting to gain widespread usage there are a few differences and added features that differ from XHTML
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 8 years ago.
Improve this question
Do you use microformats in your web projects?
If yes then why?
If no then why?
If yes then for which things do you use?
Is there any alternate of microformats in HTML 5 ?
I haven't used microformats yet. Should i start to use now or not much need?
I’ve used microformats fairly extensively. The benefits I see are
access to data for robots like Google Rich Snippets
access to data for users via µF-comsuming tools like H2VX
(some) data validation
more meaningful markup, which makes me happy
(minor) disadvantages are
time; hand-coding these things can be a pita. Either add programmatically (e.g. generate from data in CMS) or make a bunch of snippets. If doing via a CMS then it’s (for me) a no-brainer
require extra attention to UI to do well (best if exposed, but that often involves custom icon etc)
Microformats work fine as-is in HTML5. There are new HTML5 elements that map well to some µF functions, notably <time>, but be warned that current µF tools generally can’t cope with HTML5’s new elements (“Tool support” slide).
Your other alternatives are HTML5’s microdata, and RDFa. Microdata is pretty nice, but quite new so doesn’t have many tools available. You can represent microformats in microdata, and the HTML5 spec has microdata versions of vCard and vCal. There’s also HTML5’s data- attribute, but that’s for private use and doesn’t encode visible data, so is probably not what you’re after.
I perceive these three as a continuum from easy but specific (microformats) to hard but capable of anything (RDFa), with microdata (for me) occupying a sweet spot in the middle. Google Rich Snippets can read data in any of these, but user tools are still playing catchup. The main benefit of any of these is making your content more usable by exposing more of the information, and for me that’s generally worth the time.
For completeness I’ve used
hCard
hCalendar
hEvent
hAtom
hReview (once? :)
XFN
plus some rels like rel-license
EDIT: I’ve written these articles on HTML5Doctor with everything you need to know ;)
Extending HTML — Microformats
Extending HTML — Microdata
HTH
You should ask Jeff Atwood.
HTML5 defines various semantic tags to mark your data:
<time>
<address>
<header>
<nav>
<footer>
<article>
<summary>
<details>
It also allows for custom data attributes starting with "data-" within elements.
There is support for microdata which is based on microformats to provide more semantic structure to individual and groups of elements.
And to answer your main question:
No, I don't microformats because I didn't see the advantages until I gave your question a serious thought. I am using the newer HTML5 elements such as time, and custom data attributes, but not microformats because the data was already structured on the backend, and for more structured and semantic access, I'd would've used RSS feeds with specific extensions and include a link to the feed within the document itself.
That said, here's why I still support microformats and believe they are awesome and will most likely start using it in the very near future. For me, it serves a very specific purpose and has to do with programmatic access to the elements within my web applications. RSS and Atom feeds provide the same data in a very structured manner, but it's an alternative view. Microformats, or any other homegrown standards can be used effectively to enhance applications.
As long as the elements are structured in a standard manner, I can build upon a shared library of reusable code across all applications that deals with commonly occurring data items such as names, addresses, contact details, telephone numbers, etc. to enhance all applications. For example, automatically linking addresses to Google Maps, or linkifying telephone numbers to use a native protocol such as tel: on the fly for mobile devices and various other enhancements that I can do.
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
CSS Best Practice about ID and Class?
To me, it seems like both achieve the same thing. So are there any rules or standards as to when ids are more appropriate over classes and vice versa.
I know this question may be seen as subjective, I don't have any preference over one or the other and am not trying to peddle anything here. I am genuinely curious as I am new to front end web development and would like to know which to use and when.
CSS Best Practice about ID and Class?
When you need give multiple things an attribute/style, use a class, if it's singular, use an ID. If it's something I want to readily identify, like LoginBtn then it's an ID, if it's a style, like say an anchor that's blueLink, it's a class.
Another consideration for a lot of developers is javascript. e.g. a jQuery selector $('#id') is much faster than $('.class'), so if you're only dealing with one element, this is also an advantage.
This is not subjective. Classes can be used to give the two separate entities in the html (such as two divs) the same styling. Id's are unique and therefore can only style 1 element at a time.
edit: clarification