Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);
Related
I have a program that generates HTML listings that uses Cascading Style Sheet templates (that are added to the HTML file upon generation) but I would like to add the following line in the CSS template:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried the following line at the top of the CSS template earlier, but it didn't work:
#-ms-viewport {width:device-width; initial-scale:1.0}
How should I do this correctly?
The viewport directive is correctly placed in the html header. I don't think there is a valid alternative for it in CSS. In the end it's not a style but instructions for the browser on how to handle the viewport.
I keep getting a warning message when I try to set the lang attribute for the <html> element inside a CSS stylesheet (external .css file).
Inside the CSS stylesheet, I added the following to set the lang attribute for the <html> tag:
html {
lang: "en-US";
}
However, my editor (VS code) prompts me with a warning message stating the following:
Unknown property: 'lang'css(unknownProperties)
I am not sure if what I did is correct, so I want to know if there is a way to set the lang attribute for the <html> tag inside a .css?
When we usually use inline styles, we may mistakenly assume that the specific attributes of style are level with other attributes of html, but they are not.
lang is hierarchical with the id, class, style at the same level，and to some extent css is a collection of html style attributes.
You can't change style(css) to change the value of id or class, the same as lang.（at least now）
just use lang inside ele.
I din't found why web used lang as html global attribute why not style attribute but some funny thing.
desripe of dir in mdn:
This attribute can be overridden by the CSS properties direction and unicode-bidi, if a CSS page is active and the element supports these properties.
As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
Logically, Lang might be able to fit into style rather than global attributes,but it's one of Global attributes and can't be set in css at least now,so just follow the conventions it when they don't ruin something.
I have never seen or heard of setting the language in a CSS file. As far as I'm aware, you should be declaring it at the top of your HTML doc, like so:
<!DOCTYPE html>
<html lang="en"> <!-- RIGHT HERE -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
</body>
</html>
The only language related property or otherwise I could find for CSS is :lang().
As per W3 Schools:
The :lang() selector is used to select elements with a lang attribute with the specified value.
You can read the full page here, or on MDN, whichever you prefer.
I'd like know if having the title tag positioned at the end of <head> tag or in any other position, always inside the <head></head>, can lead to some kind of problem, I'm not talking about SEO stuffs, I'm talking about standards, browser rules, web application rules, or something like this.
I'd like to load a page from two different php file like this, is it a wrong way?
<!-- file1.php -->
<html>
<head>
....
<!-- file2.php -->
<title><?php echo($var)?>
</head>
<body>
...
<head> tag is not closed, because with e second file I dynamically add the <title>
tag
The title must be in the <head>
If you use non-ASCII in it then it really should be after any <meta> that specifies character encoding.
Since it is important, it is probably a good idea to put it near the top of the <head> so it gets picked up by tools that only grab the first $n bytes of the document.
I have Html (hello.html) like bellow
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
</head>
<body>
<div>
¿Hola cómo está?
</div>
</body>
</html>
It shows out as "¿Hola cómo está?" when run in browser
Is there any solution to get correct out put without altering the
hello.html file?
I hope that, it is in Spanish language but i looking for any other solution like as change the encode type or font in browser or editor.
Edit: Just noticed the requirement. But some Spanish characters require Unicode and you have to declare that in your html file.
Put this in your head.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I don't see whats wrong, if you are refering to the font type in the html and the webpage is different is because of your editor, if you really want to change the font you will need to set the font tag around your text or even better define it in the CSS
Based on the clarification in the comment section to your question....
If you are using Google Chrome, and your computer is set to an English locale, load the page, then right click on the body, and select "Translate to English."
Sounds like an interview trick question, rather than a programming one.
No.
You cannot do this without altering the html file.
Place this <meta> tag in your Head Section
<meta charset="UTF-8">
I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
Thanks!
Update
Here's the source
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
I believe I have found a better way to handle this...
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
Have you ever used requirejs?
you could set after your
requirejs.config(<confObj>);
something like this
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you!
requirejs api
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
<p>This will be display:none until the CSS is applied!</p>
</div>
Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.