Error: Element Style is Missing Required Attribute Scoped

A professional web developer always ensures if his website has any HTML error before delivering it to the client. I do it once the coding is finished. This post explains one error code I received while validating the HTML code. As I progress HTML validation with my websites, I met a new error "Error: Element style is missing required attribute scoped". Validator showed the lines where this error present. While checking the code I found the following lines.

<style >
    blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
    </style>

The screenshot of the error message is shown below.



<style> is considered as part of CSS and anything written in it will be applied to the whole document. However, if we use the attribute scoped, the style applies only to its parent element. To read more about it, you can visit the Mozilla Developer site using the link below.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style


Though scoped attribute is very helpful, not every browser support it right now. At this time only the latest versions of Mozilla Firefox is supporting scoped attribute. But there is a good method to override this defect by using: scope. Using: scope instead of scope we can avoid the risk of applying the special style to entire document in unsupported browsers.


Fix

I have fixed the HTML validation error by adding the scoped attribute to the style. Once the code is updated, the error message is gone. The new style is given below.

<style scoped>
         blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
      </style>

As I explained above, right now this code is error free but will work on Firefox (latest versions) only. For any unsupported browsers, this style will be applied to the whole document. To solve that issue, I should rewrite the code as below.

<style scoped>
    :scope blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
 </style>

Related Tutorials

1. Element div not Allowed As Child of Element Span in this Context
   
   
2. Validating user input in PHP input Forms
   
   
3. Problems With Receiving Emails On ZOHO Mail
   
   
4. Warning: Invalid Argument Supplied For foreach()