I'm trying to use a stylesheet. However, I keep getting this error:
"Uncaught SyntaxError: Unexpected token '{' (at style.css:1:4)"
My html
My css
I've tried moving the '{' to the next line (which worked) but then it says:
"Uncaught SyntaxError: Unexpected token ':' (at style.css:3:11)"
in your HTML use <link rel="stylesheet" href="../css/style.css"> instead.
CSS Styles are not scripts
In your html put all <script> tags inside the <head> tag as follows:
<head>
<link src="../css/style.css" rel="stylesheet"></link>
<script src="[ENTER JQUERY URL HERE]"></script>
<script src="[ENTER ANOTHER URL HERE]"></script>
</head>
Related
How is it possible, I don't even know what to ask here. I cannot add a "." on css?
You css file is being processed as a javascript file. Are you sure the file is being included as a css file as in:
<link href="yourstyle.css" rel="stylesheet">
and not
<script src="yourstyle.css"></script>
I'm trying to satisfy 2 checkers: W3C validator and google page insight
Google Page Insight suggested to me to load asynchronously all blocking CSS files. Well, I've rewritten the stylesheet file inclusion in preload way, as follow, and deferred from head to the end of the body:
...
<link rel="preload" href="mystyles.css" media="all" as="style"
onload="this.rel='stylesheet'"/>
</body>
Google Page Insight forced me to get it out from the head and put it at the end of the body.
Ok, I'm OK against Google Page Insight.
But W3C Validator says me now:
Error: A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, pingback, preconnect, prefetch, prerender, or stylesheet
Why "preload" is not admitted in rel attribute out of the head? I've tried to assign an itemprop, but it's not possible to have an itemprop and a rel in the same link.
Maintainer of the W3C HTML checker (validator) here. A checker bug was caused this. When I added rel=preloadsupport to the checker, I forgot to add it to the list of the rel values the checker code compares against to decide if a particular link element is allowed in the body.
I’ve now fixed it in the checker sources and pushed the fix to https://validator.w3.org/nu/.
So, the checker will no longer report an error for the code above. Thanks for catching this.
I use an example
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p></p>
</body>
</html>
and https://validator.w3.org/nu/#textarea return success.
look in https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
I am using lxml.html for parsing html content. But I don't understand why lxml is dropping "body" tag attributes.
Tried using both lxml.html.parse and lxml.html.document_fromstring as suggested here
But still it is not working.
Example html string:-
<html class="hello"> <head> <iframe src="index.html"></iframe> </head> <body class="foo"><h1>a</h1></body> </html>
Does anyone else also faced this issue?
Possibly too late to help, but I've run into a similar issue with the same underlying parser (lxml uses libxml2, which I am using directly). I believe the problem is that <iframe>s cannot appear in the <head> of the document. When libxml2 sees one there, it attempts to continue parsing by implicitly closing the <head> and starting a <body>. This implicitly created <body> is then confusing you as it does not have the class in your actual <body> tag. In fact I think your actual <body> will not appear in the parsed model at all.
I have the most basic PHP code with just these 13 lines:
<!DOCTYPE html>
<html>
<head>
<link href="design/faq.css" media="display" rel="stylesheet" type="text/css" />
<script src="js/jquery.main.js" type="text/javascript"></script>
</head>
<body>
<?php
print_r( $_GET );
echo "hey";
?>
</body>
</html>
When I am opening this page as: faq.php?code=sth; The PHP code is getting executed correctly, but the CSS is not working at all(in any browser). Since I primarily use Opera, here are screenshots:
Parsed Page
Code
The faq.css
What I tried
My first instinct was to check if the faq.css was accessible or not. Yes, the file has write property as 0644 same as all other files.
Then I checked if the path was not getting parsed correctly, but that is not the case either, as I later tried it with full path too.
Trouble
I am completely stumped at such a behavior from the least troublesome of languages as CSS. What could be the problem here? The CSS file contains only these 4 lines.
body {
background-color: #DC2826;
margin-top: 0px;
}
You're using media="display". This is not a valid type for the media attribute.
See this link for valid types of devices (all, aural, braille, handheld, projection, print, screen, tty, tv).
I had this code in my website
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"/>
<script type='text/javascript' src='/lib/player/swfobject.js'></script>
swfobject was not working (not loaded).
After altering the code to:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type='text/javascript' src='/lib/player/swfobject.js'></script>
It worked fine.
The document was parsed as HTML5.
I think it’s funny. Okay, granted a tag that is closed and a self-closing tag are not the same. So I would understand if jQuery couldn’t load (although I find it ridiciulous).
But what I do not understand is that jQuery loads but the following, correctly written tag, doesn’t?
In HTML, there are tags which are always self-closed. For example, <hr>Some content here</hr> does not make any sense. In the same way, there are tags which cannot be self-closed. <script> tag is one of them.
I am not sure about the reason of no self-closed <script> tags, but the reason might come from the fact that the tag was intended to always contain code inside. Again, I'm not sure.
Because it gets parsed as:
Line 1: Start tag for script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"/>
Line 2: JavaScript (really broken JavaScript!) to execute if the external script mentioned on line 1 fails to load
<script type='text/javascript' src='/lib/player/swfobject.js'>
Line 3: End tag for script started on line 1
</script>
Okay, granted a tag that is closed and a self closing tag are not the same.
They are the same (if there is no content), but only in XML documents. An XHTML document served as application/xhtml+xml is an XML document. In an HTML document, thanks to a legacy of improper implementations by browsers, a self-closing tag is just a start tag (and so is only OK when the end tag is forbidden).
David Dorward's answer explains this from one angle, but there is a deeper reason why you can't do this:
A slash at the end of a tag does not make it self-closing in HTML
The self-closing syntax is part of XML. In a normal HTML document, it has no meaning.
#Joe Hopfgartner: Did you alter the code to test if
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js" />
<script type="text/javascript" src="/lib/player/swfobject.js" />
works? ;-)
Update:
Run the code and the <p> element gets hidden, so...looks like it works?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4531772</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"/>
<script type="text/javascript" src="4531772.js"/>
</head>
<body>
<p class="test">Testing...</p>
</body>
</html>
JavaScript (4531772.js)
$(document).ready(function() {
$('.test').hide();
});