Error: Element Style is Missing Required Attribute Scoped

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 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 browsers 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 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()

No comments: