I tried to find resources about 'alert' element, but nothing came out.
<alert type="success">Your message</alert>
But I can use it without issue. How can I apply CSS styles to different alert's type?
You look like you are trying to use Bootstrap's 'alert' classes (e.g. 'success').
http://getbootstrap.com/components/#alerts
The only way to make that a semantic element like <alert /> that I know of is something like AngularJS: http://angular-ui.github.io/bootstrap/#/alert
In this case, it is all styled by Bootstrap, or whatever Bootstrap theme you are using.
First there is not an HTML tag alert. you can create an alert with javascript.
You cannot add style to an alert as it is produced by the browser by default.
Have a look to this post:
How do I style the alert box with CSS?
W3C is always a very credible source for HTML syntax.
http://www.w3.org/TR/html-markup/Overview.html#toc
Now for where you heard about an <alert> element I have no idea. Never heard of it, but that does not mean it does not exist. W3C does not have it in this "complete set of HTML elements". It may be an element something other than HTML
As far as I know, and as some others have pointed out, there is no alert element in HTML.
However, you can use it. To allow for the HTML evolution, any modern browser will accept happily any unkown element.
I am not saying it is a good practice to use whatever name you want for an element. I am saying that the browsers will accept it.
About giving it format, use standard practices. Give it a class, or an id, and reference that in the CSS. No problem .
Technically there is a tag but its for html5 and its not completly supported,There is a table at the end of this article that shows browser compatibility.
hope this is informative:
Native Popups and Modals With the HTML5 “dialog” Element
You could use Alertify.
It has pretty decent customization options.
Related
Is there any harm if custom tags are used and created based on one's choice?
like the one below
<hello>hi there!</hello>
I tried using CSS
hello{
color:red;font-family:arial;
}
The above code works
I have used the above and also can add CSS. is there any harm of doing this, or the CSS features these won't support?
This is purely out of curiosity so don't suggest CSS edits or solutions please.
Why you can't make up elements
It is not valid HTML. Therefore how it behaves will be unpredictable.
It may work in some browsers, currently, but if any of your users visit your site on a different browser, they may get a totally different experience. Further to that, support could be dropped, or change at any time without warning.
Other options for custom elements
It is actually possible to define your own Document Type Definition (DTD), however that too is not a good idea.
Your best bet is to either stick with normal, well-supported HTML elements (see here for list of valid elements), or to use a web component framework, such as Vue, Angular or React, for custom elements/ components.
Don't forget, that you can add the class attribute (as well as others) to any element for styling, so for your use-case, there isn't any need to have additional elements.
I have made a small popup window that shows up at the bottom of the page (like a recommendation system). But whenever I embed my script to any of the client's website, it disturbs my CSS. Like the CSS which is on the client's website overshadows my CSS and this causes me to fix my CSS for each client. Is there a fix that I will have to install on my code?
Please help
Thanks
This is due to overlapping CSS properties of client's and your newly developed. I recommend you to inspect element of google chrome's very nice feature. You can individually identify your overlapping properties. If this is too much complex. Like James commented give a new id to your pop-up menu, which will separate your pop-up CSS from all other components on your web page
On of the ways I heard about is Shadow Dom, and in this article it describe it and at the beginning of the article he listed the problem in brief: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
But there is a fundamental problem that makes widgets built out of
HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
encapsulated from the rest of the page. This lack of encapsulation
means your document stylesheet might accidentally apply to parts
inside the widget; your JavaScript might accidentally modify parts
inside the widget; your IDs might overlap with IDs inside the widget;
and so on.
Else which I did my self long time ago is: to name all your ids, classes with a special names for example 'mywebsite.myclass' this may minimize the issue. and I saw this way is used by many bookmarklets which import html,css and javascript to user opened page.
"All browsers" is a lot of browsers :P
CSS is going to get interesting soon thanks to shadow DOM. You are going to be able to create a web component that is completely isolated, DOM and CSS, from the rest of the document, which is exactly what you want.
Obviously, it's not in place in al browsers (only in Chrome at the time of me writing this). Meanwhile, this is what I would do:
Use shadow DOM components if available
Anyway, manually name-space everything you use (CSS classes, JavaScript, etc)
Try to use custom elements for everything. (that way, there's less risk of your e.g. <h2>s being styled by outer CSSs)
As a last resource, use very specific selectors (look up CSS specificity), and use !important. Just to be clear: never do this routinely!
Most of that stuff will fail for some value of "All browsers". You'll have to compromise somewhere, I guess.
Yes you can reset your div styles.
Something like this:
div.your-popup * {
/* your reset */
}
And try to set !important to styles or put them inline.
In addition create unique class names that no one can override it.
P.S. http://www.cssreset.com/
I am seeing some attribute I have never seen before in a div tag. I haven't touch html for a while but googling the attribute didn't return much useful info.
<div dataquery="#item_1306" comp="box.components.Flashplayer" id="box_Flashplayer_2" propertyquery="#box_Flashplaye_2" class="box_Flashplaye_style2"...
My question is, do you know what are these "dataquery" "comp" and "propertyquery" attributes?
Thanks alot folks.
HTML is often enhanced with custom attributes these days, and HTML5 explicitly allows for that. Normally these attributes should be prefixed with "data-", but obviously this is not the case here.
The meaning depends most probably on a script included in the page.
For example, in twitter bootstrap it is common to see attributes like <body data-spy='scroll'> which is than interpreted by a script and allows for monitoring the amount a user scrolls.
When including Facebook like buttons you may have attributes like data-style which controls whether a box, or a button, or hwatever is used.
You can add you own attributes to elements. I don't think theese atributes are standard attributes lika class and name but an attribute that the programmer has added self for some purpose.
Those are not W3C attributes, they have used to perform some task, may be to the lagulage it used and may performance some special tags, But its not best practice because it gives HTML validation errors, better thing is use data-xxxx tag for extra attributes.
More readings.
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
http://ejohn.org/blog/html-5-data-attributes/
http://html5doctor.com/html5-custom-data-attributes/
I am trying to do a hover->highlight effect on the cells of the table in this fiddle, so they will appear to look like buttons. I can't use any javascript or CSS, but I can use HTML5. Does anyone know how to do it. I know there is an onmouseover attribute in HTML5, just not much experience yet.
Thanks!
You can't. If you want to change the appearance of a given element based on user's behavior you have to use JavaScript (event based) or the CSS pseudo class :hover.
However, if you can edit the HTML of your content, then you should be able to insert a custom <style> element or add event listeners. Note that the first isn't valid in HTML4*, in HTML5 you can use the scoped attribute to style only a given scope (but I don't think this behavior is implemented in any browser yet).
*This solution should work, even if the resulting code HTML4 isn't valid any more.
I have a website in which I provide tool-tips for certain things using a hidden <span> tag and JavaScript to track various mouse events. It works excellently. This site somewhat caters towards people with vision issues, so I try to make things degrade as well as possible if there is no JavaScript or CSS and generally I would say that it is successful in this regard.
So my question is, is it possible for these <span> to only exist if CSS is being used? I have thought about writing out the tool-tips in JavaScript on document load. But I was wondering if there is a better solution.
Perhaps you need to re-think the way you are providing tooltips. Could the content be contained in the title attribute of a semantically appropriate element?
EDIT: If you provide more info, someone might be able to suggest more of a solution. What sorts of elements are the tooltips popping up on? Images? Would the abbreviation tags be appropriate?
Quick Solution I just came up with: <span> has access to the core attributes, which include title, so you could include the tooltip text in the title, and use a javascript library like jQuery to display tooltips for all spans with a title.
A quick hack would be to color the text the same as the background (say, white on white) in html, and then use CSS to change the color back to something visible (black on white). Of course, this is only relevant for people able to see the text. Screen readers and such wouldn't see the text as hidden.
CSS is also used by screenreaders to help define which page elements are read or not.
Screen readers will almost always ignore elements with display:none applied to them, so not using CSS is not a valid indicator of a screenreader's presence.
I would go with Chris' idea of using javascript to generate the tooltips based on a title (or alt) attribute.
You could use JS to ensure that tooltips are only displayed when valid styles are set, so if JS is enabled and CSS disabled you can treat the extra information differently (eg footnotes).
http://juicystudio.com/article/screen-readers-display-none.php
http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/