If possibility to checking in CSS detect browser support javascript ?
or set other CSS Media Queries for browser not support javascript ?
You can do it without javascript. You have to use ... HTML !
There is a tag for that : noscript
Summary :
The HTML <noscript> Element defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
Example :
<noscript>
<!-- this content will be display if no js -->
</noscript>
In your case, I think you will need something like this :
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
if you want more info about it, this topic on SO is pretty good.
The common way is to add a class called no-js to your , e.g.
<head class='no-js'>
then as your first line of JS, remove the class.
To keep it simple, in jQuery you'd then write:
$("head").removeClass("no-js");
If you are using plain JS, you need to parse the class attribute and remove just the no-js bit, else if you add further classes later you will wipe them out with a naive approach.
You can then write CSS like:
.message {
display:none;
}
.no-js .message {
display:block;
}
If you wanted to show an element with class message only to people with JS disabled.
Related
Is there a way to force a css link to a file to be the one that is used without relying on cascading order to determine what gets overwritten?
I am using a CMS where I can add new css links but cannot change the cascading order in the header tag:
<link rel="stylesheet" href="new.css" type="text/css" />
<link rel="stylesheet" href="old.css" type="text/css" />
I need "new.css" to overide "old.css" without overwriting the code of old.css. I do not have access to simply change the order of the header code, I so wish I could!
There's no way what you're looking for.
Your last stylesheet would override the previous stylesheet rules.
But if you can use javascript or jquery then you may shift the order like this:
jQuery:
$('link[ref="old.css"]').insertBefore($('link[ref="new.css"]'));
Actually you can if you make the selector more specific. You can do this by simply adding "body" before the actual selector.
Example:
.button {
color: blue;
}
Would be ignored by using
body .button {
color: green;
}
Quick fiddle: http://jsfiddle.net/4cbs5por/
If your CMS allows you to add new CSS links, it should be smart enough to put the new one the bottom. If it's putting it on the top and you don't want to mess with jQuery, you can just copy the content from the "old.css" and paste that into the "new.css" file and vise-versa. That way you'll have the correct content in the bottom file which will override the top link.
I have an HTML file that wants to be viewed standalone, so it needs an h1.
But I want to embed it in another page too, where it does not need an h1, using object.
What I've come up with is
<head>
<style>
#foo h1 {display: none;}
</style>
</head>
<body>
<script>
document.body.id = window.name;
</script>
<h1>title</h1>
Content.
</body>
The style has no effect when the document is loaded by itself, because the window.name is null. But, in the including file, I use:
<object data="that-file-up-there.html" name="foo">
which gives the nested browsing context the name foo, and then the javascript copies it as the id of the nested document , thus causing the style to trigger, and suppress the h1. This works, but am I overlooking a way to not need the javascript?
No. You cannot do this without javascript because HTML and CSS are not programming languages that can copy attributes, elements or properties from other pages.
I'm new to web development and I'm working on my second website. I feel it should be a basic question and probably have already gotten addressed somewhere on Stack Overflow. However I can't find anything directly relevant, due to a lack of precise description. The problem is:
Because I'm doing copywriting along the way, frequently I find myself needing to update the copy inside the HTML code wrapped deep inside many div's. It's quite inconvenient; and because of texts, codes can sometimes get messy.
I wonder if there's a simple way to leave a "handle" in place of texts inside HTML code, "plugging in" text from elsewhere, like plugging in style from CSS? I suppose it should work in a concept similar to what a CMS have.
With jQuery, you can use .html to plug text and symbol to html page
<html>
<head>
<title>Your page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#statictext").html('<b>jQuery</b>');
$("#symbol").html('©');
});
</script>
</head>
<body>
<div id="statictext"></div>
<div id="symbol"></div>
</body>
I think what you're looking for is the id HTML attribute. You can use it like this from javascript (i'm using js since you don't specify a language):
var yourelement = document.getElementById('yourelementid');
yourelement.textContent = "Yer text";
with your html being:
<div id="yourelementid"></div>
with the element being a div or any other element that can have text content.
If you need to insert HTML, you can do it through .innerHTML or, preferrably, manipulate the DOM, by adding and removing elements. CSS also has an attr() property function, which allows you to set an arbitrary property on an HTML element (such as piece="textstuff", with the css being content: attr(piece)).
You can also construct elements and append them (again, if what you want is to insert HTML markup) by using .appendChild and .removeChild.
When you link your stylesheet to your document
<link type ="text/css" rel ="stylesheet" href="stylesheet.css"/>
why don't you put a semicolon after each attribute, when you put a semicolon after each attribute when doing something like inline styling e.g.
<p style="font family:Arial; color:yellow; etc
?
Attributes in HTML are not the same as properties in CSS. They are completely different languages and therefore have completely separate syntaxes. In HTML you're creating a link. In CSS you're creating a property: value; pair.
When you put style inline, as per your second bit of code, you're basically telling the browser that you're writing CSS and that it needs to parse it as such. In doing so you then have to use CSS syntax, not HTML.
I heard (from Crockford) what type attributes on LINK and SCRIPT elements are superfluous when those elements are used to load external resources. (Because the HTTP response determines the content-type of the resource.)
<link rel="Stylesheet" href="foo.css">
<script src="foo.js"></script>
But what about the case when non-HTML code is placed inline inside the STYLE and SCRIPT elements?
<style>
/* inline CSS rules */
</style>
<script>
// inline JavaScript code
</script>
Is setting the type attribute in those cases recommended?
Are there any issues when we choose to omit the type attribute?
For HTML 4, the answer is simple: The type attribute is required for both <script> and <style>.
Authors must supply a value for this attribute; there is no default value for this attribute.
As far as I know, the default fallback in all browsers in its absence is text/javascript and text/css, respectively. It's widespread (though invalid) practice to not use the type attribute. I would still specify it to avoid browser problems.
HTML 5 accepts reality and declares these values as official defaults for <style> and <script>. I'm pretty sure this makes it okay to leave them off for inline content as well, which will be parsed using the correct content type automatically.