NetBeans Forums

 FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
  

<style> Tags Require "scoped" Attribute

 
Post new topic   Reply to topic    NetBeans Forums -> Web Client Users
View previous topic :: View next topic  
Author Message
TTCUSM



Joined: 10 Oct 2015
Posts: 11

PostPosted: Fri Nov 27, 2015 2:43 am    Post subject: <style> Tags Require "scoped" Attribute Reply with quote

I'm using NetBeans 8.1 to edit an HTML document with an inline <style> tag, and it gives me a warning saying the <style> tag requires a "scoped" attribute. I did some searching, and apparently this attribute isn't required:
Quote:

Attributes

This element includes the global attributes.

type
This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and default to text/css if it's missing.
media
This attribute defines which media the style should apply to. It's value is a media query, which default to all if the attribute is missing.
scoped
If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.

title
Specifies alternative style sheet sets.
disabled
If set, disables (does not apply) the style rules, specified within the element, to the Document.


I also looked at the HTML 5 standard, and they have examples where the <style> tag has no scoped attribute:

Quote:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My favorite book</title>
<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>
</head>
<body>
<p>My <em>favorite</em> book of all time has <em>got</em> to be
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
about the <i lang="la">Felis Catus</i> in modern human society.</p>
</body>
</html>
Back to top
vriha



Joined: 07 Feb 2013
Posts: 135

PostPosted: Fri Nov 27, 2015 8:38 am    Post subject: <style> Tags Require "scoped" Attribute Reply with quote

Could you provide your sample code that causes this?

Thank you,
Lada

On 27/11/15 03:43, TTCUSM wrote:
Quote:
I'm using NetBeans 8.1 to edit an HTML document with an inline <style> tag, and it gives me a warning saying the <style> tag requires a "scoped" attribute. I did some searching, and apparently this attribute isn't required (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style):

Quote:
Attributes

This element includes the global attributes.

type
This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and default to text/css if it's missing.
media
This attribute defines which media the style should apply to. It's value is a media query, which default to all if the attribute is missing.
scoped
If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
title
Specifies alternative style sheet sets.
disabled
If set, disables (does not apply) the style rules, specified within the element, to the Document.

I also looked at the HTML 5 standard (http://www.w3.org/TR/html5/document-metadata.html#the-style-element), and they have examples where the <style> tag has no scoped attribute:


Quote:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My favorite book</title>
<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>
</head>
<body>
<p>My <em>favorite</em> book of all time has <em>got</em> to be
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
about the <i lang="la">Felis Catus</i> in modern human society.</p>
</body>
</html>




Attachments:
http://forums.netbeans.org//files/scopedstyle_169.png
Back to top
TTCUSM



Joined: 10 Oct 2015
Posts: 11

PostPosted: Sat Nov 28, 2015 2:06 am    Post subject: Re: <style> Tags Require "scoped" Attribute Reply with quote

Lada,

I'm pasting in the HTML file that causes this issue.
I also tried copying the sample code from the HTML 5 spec into my NetBeans project. It gives me the error when the <style> tag is inside the <body>, but not when it's in the <head>.

Code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>JQuery Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <style type="text/css">
            img.person {
                height: 225px;
                width: 150px;
            }
            img.work {
                height: 225px;
                width: 150px;
                display: none;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready (function ()  {
                $("img.person").on ("mouseenter", function ()    {
                    var workImage = $(this).closest ("div#foundingFather").find ("img.work");
                    $(this).slideUp ();
                    workImage.slideDown ();
                });
                $("img.work").on ("mouseleave", function ()    {
                    var personImage = $(this).closest ("div#foundingFather").find ("img.person");
                    $(this).slideUp ();
                    personImage.slideDown ();
                });
            });
        </script>
        <div id="foundingFather">
            <a href="http://www.google.com/">
                <img alt="George Mason" id="mason" class="person" src="https://cdn.loc.gov/service/pnp/cph/3c00000/3c06000/3c06800/3c06865r.jpg">
                <img alt="Bill of Rights" id="billOfRights" class="legalDoc" src="http://cdn.loc.gov/service/pnp/cph/3a00000/3a04000/3a04400/3a04470r.jpg">
            </a>
        </div>
    </body>
</html>


Edited: JQuery 2.1.4 is not compatible with some versions of Internet Explorer.


Last edited by TTCUSM on Thu Dec 10, 2015 2:29 am; edited 1 time in total
Back to top
vriha



Joined: 07 Feb 2013
Posts: 135

PostPosted: Mon Nov 30, 2015 2:46 pm    Post subject: <style> Tags Require "scoped" Attribute Reply with quote

Hi,
thank you for the sample. Based on [1] I'd say the warning is correct.
The specification says:

"A style element without a scoped attribute is restricted to appearing
in the head of the document."

Also HTML validator [2] shows the same warning. The scoped attribute is
not required when used in head element, but it is required in body.


[1] https://html.spec.whatwg.org/multipage/semantics.html#the-style-element
[2] https://validator.w3.org/


Lada

On 28/11/15 03:06, TTCUSM wrote:
Quote:
Lada,

I'm pasting in the HTML file that causes this issue.
I also tried copying the sample code from the HTML 5 spec into my NetBeans project. It gives me the error when the <style> tag is inside the <body>, but not when it's in the <head>.


Code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>JQuery Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style type="text/css">
img.thumbnail {
height: 225px;
width: 150px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready (function () {
$(".thumbnail").on ("mouseover", function () {
alert ("Thumbnail fired a mouseover event.");
});
});
</script>

<img alt="George Mason" class="thumbnail" src="http://memory.loc.gov/award/icufaw/apc0009r.jpg">
</body>
</html>






Back to top
TTCUSM



Joined: 10 Oct 2015
Posts: 11

PostPosted: Tue Dec 01, 2015 1:56 am    Post subject: Re: <style> Tags Require "scoped" Attribute Reply with quote

vriha wrote:
Hi,
thank you for the sample. Based on [1] I'd say the warning is correct.
The specification says:

"A style element without a scoped attribute is restricted to appearing
in the head of the document."

Also HTML validator [2] shows the same warning. The scoped attribute is
not required when used in head element, but it is required in body.


[1] https://html.spec.whatwg.org/multipage/semantics.html#the-style-element
[2] https://validator.w3.org/


Lada


Thank you for the links.
It's a good thing W3C can tell us whether our HTML is valid Very Happy
Back to top
Display posts from previous:   
Post new topic   Reply to topic    NetBeans Forums -> Web Client Users All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum


Powered by phpBB
By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo