Unknown property name css font

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS — Uknown Property Name #10531

CSS — Uknown Property Name #10531

Comments

Bug report

Sporadically, when typing css into the jsx style as the tutorials indicate is the preferred method, the browser does not recognise it as a valid property and this error «Unknown property name»

I’ve double and triple checked the css is valid and it is. However on further investigation it appears that if I type my identical css in dev tools, and then paste it to replace it in my jsx style, it works.

To Reproduce

function MyThing(props) < return ( 
Hello World!
  
 ) > export default MyThing 

if anybody wants it, my package.json

< "name": "hello-next", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "dev": "next", "build": "next build", "start": "next start" >, "author": "", "license": "ISC", "dependencies": < "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-brands-svg-icons": "^5.12.1", "@fortawesome/free-regular-svg-icons": "^5.12.1", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/react-fontawesome": "^0.1.8", "isomorphic-unfetch": "^3.0.0", "jsonwebtoken": "^8.5.1", "next": "^9.2.1", "next-cookies": "^2.0.3", "react": "^16.12.0", "react-cookie": "^4.0.3", "react-dom": "^16.12.0", "react-markdown": "^4.3.1", "react-responsive-carousel": "^3.1.51", "styled-components": "^5.0.1" >> 

Expected behavior

This works most of the time, but it’s happened enough times now for me to suspect a problem. I don’t think it’s specific to my project environment as it happens with more than project. I can’t rule out a problem with my machine though (see specs below)

Screenshots

System information

• OS: [Windows 10 Pro, i7770k, 32gb DDR4, x64]
• Browser [Chrome(80), Firefox(72), MS Edge(44)]
• Version of Next.js: [9.2.1]

Additional context

My initial feeling of this problem as it’s an encoding issue with the css. it’s being sent to the browser as an escaped string and when the browser interprets it the error is thrown. I can confirm it’s not a browser issue (as far a I can tell) as I can reproduce this on Chrome, Firefox, Edge and I get the same error when viewing on Safari on my Macbook.

Also, as another side note — I’m not 100% certain if this is a next.js issue or react. Only reason I think it’s here is because if I understand it correctly, next.js compiles the components when they’re required to be served. Please correct me if I’m wrong here, and in which case my apologies for dropping the bug in the wrong place!

The text was updated successfully, but these errors were encountered:

Источник

CSS 2.1 errors: not a known property name

Validation errors are all fine, because they are using the proper CSS 2.1 Documentation and your trying to validate CSS3 properties in a CSS 2.1 context.

What you probably want is to build your application bypassing the CSS Errors, no matter what they are, for that you can transform this «errors» into warnings using Visual Studio Options:

in The Visual Studio menu click on:

Tools > Options. and drill down Text Editor > CSS > Miscellaneous

and just make the CSS Errors to be treated as warnings

Solution 2

You’re validating your stylesheets against CSS 2.1, but those properties are CSS3.

Change your stylesheet validation to CSS3.

Solution 3

I realize that this response is a little late, but someone else may find this information useful.

To make the filter tag warning go away in VS2010 (as opposed to just ignoring it), close VS2010 and edit the following file: C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\1033\schemas\CSS\css30.xml

You need to change the filter property from enum to composite.

Solution 4

The errors you are getting are validation errors. Opacity and filter are not in the CSS 2.1 spec despite being supported by all major browsers.

Solution 5

You need to validate this as CSS3

When you do that, you will two errors for your opacity styles and a bunch of warnings dealing with duplicated background-colors .

Related videos on Youtube

Alex Gordon

Check out my YouTube channel with videos on Azure development.

Comments

body, div, p, h1, h2, h3, h4, ul, li, table < margin:0; padding:0; border:none; >body < background: #B4B4B4 url(images/body_bg.gif) repeat left top; font-family: Tahoma, Arial, sans-serif; font-size:75%; >/* Master Page Layout */ #master_header < margin: -1px auto 0 auto; width: 800px; >#master_headertop < background: url(images/headertop_img.jpg) no-repeat left top; >#master_headerbottom < background: url(images/headerbottom_img.png) no-repeat left top; >#master_page < margin: 5px auto 20px auto; width: 800px; >#master_menu < float: left; width: 240px; padding-right: 10px; >.sidebar < width: 100%; margin-bottom: 10px; >.sidebarheader < height: 24px; padding: 10px 0 0 35px; background: url(images/sidebar_header.png) no-repeat left top; color: #FFF; font-family: Arial, Sans-Serif; font-size: 1.2em; font-weight: bold; text-transform: uppercase; >.sidebarcontent < border: 1px solid #0F2543; padding: 20px 20px 20px 30px; line-height: 1.5em; font-weight: bold; >#master_sidebarSamples < padding-top: 72px; background: #FFF url(images/samples_bg.gif) no-repeat left top; >#master_sidebarWalkthroughs < padding-top: 72px; background: #FFF url(images/walkthrough_bg.gif) no-repeat left top; >.sidebarcontent a < padding: 2px 5px; color: #5377A9; text-decoration: none; >.sidebarcontent a:hover < background-color: #0F2543; color: #FFF; >.sidebarcontent a:visited < font-weight: normal; >#master_content < float: left; width: 550px; margin-right: -550px; color: #666666; >/* #master_content a < color: #5377A9; padding: 1px; >#master_content a:link < >#master_content a:visited < >#master_content a:hover < background-color: #BFBFBF; color:#FFF; >*/ #master_content ul < margin: 0 25px 0 30px; >#master_contentheader < height: 19px; background: url(images/rightcoltop.gif) no-repeat right top; >#master_contentplaceholder < padding: 30px 20px 40px 20px; border-left: 1px solid #0F2543; border-right: 1px solid #0F2543; border-bottom: 1px solid #0F2543; background-color: #EFEFEF; line-height: 1.5em; >#master_contentfooter < clear: both; padding: 10px 0 5px 10px; color: #333; font-size: 0.8em; letter-spacing: 0.1em; >/* Content Page Layout */ .demoarea < padding:20px; background:#FFF url(images/demotop.png) no-repeat left top; >.demoarea p < padding:5px; >.demoheading < padding-bottom:20px; color:#5377A9; font-family:Arial, Sans-Serif; font-weight:bold; font-size:1.5em; >.demobottom < height:8px; background:#FFF url(images/demobottom.png) no-repeat left bottom; >.heading < padding: 1em 0 1em 0; color:#5377A9; font-family:Arial, Sans-Serif; font-weight:bold; font-size:1.2em; >.subheading < padding:.8em 0 0.5em 0; color:#0F2543; font-weight:bold; font-family:Arial, Sans-Serif; font-size:1.1em; >p <> em i strong .codeReference < font-family: 'Courier New', Monospace; font-style: normal; font-weight: bold; >pre, code < display:block; margin:15px 15px 15px 0; padding:10px; border:1px dashed #CCC; background-color:#FFF; color:#000; font-family:'Courier New', Monospace; font-size:0.9em; font-style:normal; >.releaseList < list-style-type:disc; >/* Styles for the Animation Reference */ .animationReferenceTable < >.animationReferenceRow < >.animationReferenceField < text-align: right; vertical-align: top; padding-top: 5px; >.animationReferenceCode < margin-top: 5px; vertical-align: top; font-family: 'Courier New', Monospace; font-style: normal; font-weight: bold; display:block; background-color:#FFF; color:#000; font-family:'Courier New', Monospace; font-size:0.9em; font-style:normal; font-weight: bold; margin-bottom: 5px; >.animationReferenceItems < vertical-align: top; >.animationReferenceItemTable < width: 100%; padding: 0px; margin: 0px; >.animationReferenceItemRow < width: 100%; padding: 0px; margin: 0px; >.animationReferenceItem < width: 100%; padding: 0px; margin: 0px; padding-bottom: 10px; >.animationReferenceItemCode < display:block; background-color:#FFF; color:#000; font-family:'Courier New', Monospace; font-size:0.9em; font-style:normal; font-weight: bold; >/******************************/ /**Styling information specific to individual content pages**/ /* Accordion */ .accordionHeader < border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; >#master_content .accordionHeader a < color: #FFFFFF; background: none; text-decoration: none; >#master_content .accordionHeader a:hover < background: none; text-decoration: underline; >.accordionContent < background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; >/*Cascading DropDown*/ /*CollapsiblePanel*/ .collapsePanel < background-color:white; overflow:hidden; >.collapsePanelHeader < width:100%; height:30px; background-image: url(images/bg-menu-main.png); background-repeat:repeat-x; color:#FFF; font-weight:bold; >#master_content .collapsePanelHeader a #master_content .collapsePanelHeader a:hover /*Confirm Button*/ /* DropShadow */ #master_content .dropShadowPanel span #master_content .dropShadowPanel span:hover .dropShadowPanel < width:300px; background-color:#5377A9; color:white; font-weight:bold; >/*Drag Panel*/ .dragMe < width:100%; height:21px; background-color:#FFF; background-image:url(images/header-opened.png); text-align:center; cursor:move; font-weight:bold; >.overflowHidden .overflowScroll /*Hover Menu*/ .popupMenu < position:absolute; visibility:hidden; background-color:#F5F7F8; opacity:.9; filter: alpha(opacity=90); >.popupHover < background-image:url(images/header-opened.png); background-repeat:repeat-x; background-position:left top; background-color:#F5F7F8; >/* PagingBulletedList */ .selectIndex < font-weight: bold; text-decoration:none; >.unselectIndex < font-weight:normal; text-decoration:underline; >/*Modal Popup*/ .modalBackground < background-color:Gray; filter:alpha(opacity=70); opacity:0.7; >.modalPopup < background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; >.sampleStyleA < background-color:#FFF; >.sampleStyleB < background-color:#FFF; font-family:monospace; font-size:10pt; font-weight:bold; >.sampleStyleC < background-color:#ddffdd; font-family:sans-serif; font-size:10pt; font-style:italic; >.sampleStyleD < background-color:Blue; color:White; font-family:Arial; font-size:10pt; >/*Popup Control*/ .popupControl < background-color:White; position:absolute; visibility:hidden; >/*Reorder List*/ .dragHandle < width:10px; height:15px; background-color:Blue; background-image:url(images/bg-menu-main.png); cursor:move; border:outset thin white; >.callbackStyle < border:thin blue inset; >.callbackStyle table < background-color:#5377A9; color:Black; >.reorderListDemo li < list-style:none; margin:2px; background-image:url(images/bg_nav.gif); background-repeat:repeat-x; color:#FFF; >.reorderListDemo li a .reorderCue < border:dashed thin black; width:100%; height:25px; >.itemArea < margin-left:15px; font-family:Arial, Verdana, sans-serif; font-size:1em; text-align:left; >/* Rounded Corners*/ .roundedPanel < width:300px; background-color:#5377A9; color:white; font-weight:bold; >/* ResizableControl */ .frameImage < width:130px; height:65px; overflow:hidden; float:left; padding:3px; >.frameText < width:100px; height:100px; overflow:auto; float:left; background-color:#ffffff; border-style:solid; border-width:2px; border-color:Gray; font-family:Helvetica; line-height:normal; >.handleImage < width:15px; height:16px; background-image:url(images/HandleHand.png); overflow:hidden; cursor:se-resize; >.handleText < width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; >.resizingImage < padding:0px; border-style:solid; border-width:3px; border-color:#B4D35D; >.resizingText < padding:0px; border-style:solid; border-width:2px; border-color:#7391BA; >/*Textbox Watermark*/ .unwatermarked < height:18px; width:148px; font-weight:bold; >.watermarked < height:20px; width:150px; padding:2px 0 0 2px; border:1px solid #BEBEBE; background-color:#F0F8FF; color:gray; >/* Rating */ .ratingStar < font-size: 0pt; width: 13px; height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; >.filledRatingStar < background-image: url(Images/FilledStar.png); >.emptyRatingStar < background-image: url(Images/EmptyStar.png); >.savedRatingStar < background-image: url(Images/SavedStar.png); >/*Toggle Button*/ /*Setup*/ .walkthrough li /*Using a sample extender*/ /*Creating a new extender*/ .walkthroughNote < padding-left:25px; font-style:italic; >/*Other neat stuff*/ /************ PasswordStrength Related Styles ***********************/ .TextIndicator_TextBox1 < background-color:Gray; color:White; font-family:Arial; font-size:x-small; font-style:italic; padding: 2px 3px 2px 3px; >.BarIndicator_TextBox2 < color:Blue; background-color:Blue; >.BarBorder_TextBox2 < border-style:solid; border-width:1px; width:200px; vertical-align:middle; >.TextIndicator_TextBox3 < background-color:Blue; color:Yellow; font-size:small; font-variant:small-caps; padding: 2px 3px 2px 3px; >.TextIndicator_TextBox3_Handle < width:16px; height:14px; background-image:url(images/Question.png); overflow:hidden; cursor:help; >.dynamicPopulate_Normal < border:silver 1px inset; padding:2px; text-align:center; height:2em; margin:5px; width:200px; >.dynamicPopulate_Updating < background-image:url(images/loading.gif); background-repeat:no-repeat; border:silver 1px inset; text-align:center; padding:2px; height:2em; margin:5px; width:200px; >/************ MaskedEdit Related Styles ***********************/ .MaskedEditFocus < background-color: #ffffcc; color: #000000; >.MaskedEditMessage < color: #ff0000; font-weight: bold; >.MaskedEditError < background-color: #ffcccc; >.MaskedEditFocusNegative < background-color: #ffffcc; color: #000000; >.MaskedEditBlurNegative < color: #ff0000; >.MyCalendar .ajax__calendar_container < border:1px solid #646464; background-color: lemonchiffon; color: red; >.MyCalendar .ajax__calendar_other .ajax__calendar_day, .MyCalendar .ajax__calendar_other .ajax__calendar_year < color: black; >.MyCalendar .ajax__calendar_hover .ajax__calendar_day, .MyCalendar .ajax__calendar_hover .ajax__calendar_month, .MyCalendar .ajax__calendar_hover .ajax__calendar_year < color: black; >.MyCalendar .ajax__calendar_active .ajax__calendar_day, .MyCalendar .ajax__calendar_active .ajax__calendar_month, .MyCalendar .ajax__calendar_active .ajax__calendar_year < color: black; font-weight:bold; >.validatorCalloutHighlight

Error 1 Validation (CSS 2.1): ‘opacity’ is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 402 2 C. \WebSite3\ Error 2 Validation (CSS 2.1): ‘filter’ is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 403 2 C. \WebSite3\ Error 3 Validation (CSS 2.1): ‘filter’ is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 427 2 C. \WebSite3\ Error 4 Validation (CSS 2.1): ‘opacity’ is not a known CSS property name. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 428 2 C. \WebSite3\ Error 5 Validation (CSS 2.1): ‘lemonchiffon’ is not a valid value for the ‘background-color’ property. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 738 23 C. \WebSite3\ Error 6 Validation (CSS 2.1): ‘lemonchiffon’ is not a valid value for the ‘background-color’ property. C:\Documents and Settings\agordon\My Documents\Visual Studio 2008\WebSites\WebSite3\StyleSheet.css 759 23 C. \WebSite3\

Источник

CSS Error in browser: ‘Unknown property name’ when using pseudo :after

In chrome console you can see that there are 4 apparently incorrectly encoded characters before the last few properties. It matches with the 4 spaces indent . There might be some exotic characters showing as space in your CSS file that didn’t make it when you pasted your code in here.

Can you simply try to delete the indenting spaces in front of these properties and see if that works?

Code2016

Comments

I am getting the following error in Chrome and Explorer when trying to set css property of a pseudo :after . (I’m trying to set a burger nav icon and style it) I am getting the error:

when I set the width , height , background etc. of pseudo :after . Here it is in Chrome: The code that is giving me the error:

* < margin: 0%; >body < background-color: #ece8e5; >nav < height: 40px; width: 100%; background: #455868; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 2px solid #283744; >nav ul < padding: 0; margin: 0 auto; width: 600px; height: 40px; border: 2px solid; >nav li < display: inline; float: left; >.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >.clearfix < *zoom: 1; >nav a < color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; line-height: 40px; text-shadow: 1px 1px 0px #283744; >nav li a < border-right: 1px solid #576979; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; >nav li:last-child a < border-right: 0; >/*the menu will have brighter color when it is in :hover or :active state*/ nav a:hover, nav a:active < background-color: #8c99a4; >/*extra link will be hidden (for the desktop screen)*/ nav a#pull < display: none; >/*When the screen size is max 600px the nav ul width will be 50%*/ @media screen and (max-width: 600px) < nav < height: auto; >nav ul < width: 100%; display: block; height: auto; >nav li < width: 50%; float: left; position: relative; >nav li a < border-bottom: 1px solid #576979; border-right: 1px solid #576979; >nav a < text-align: left; width: 100%; text-indent: 25px; >> /*how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint)*/ @media only screen and (max-width : 480px) < nav < border-bottom: 0; >nav ul < display: none; height: auto; >nav a#pull < display: block; background-color: #283744; width: 100%; position: relative; >/* Psuedo code :after's width, height, display etc. doesn't work in browsers. showing error.*/ nav a#pull:after < content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; >> /*screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.*/*/ @media only screen and (max-width : 320px) < nav li < display: block; float: none; width: 100%; >nav li a < border-bottom: 1px solid #576979; >> 

Thank you. I deleted the indented spaces and it worked. Although I didn’t understand how these special characters appear if you can’t even see them? Anyways cheer!

Encoding and special characters can be a real pain. DA same character code will be interpreted differently depending on the encoding chosen to interpret it. Maybe you copy pasted that piece of code from somewhere which was using a different encoding and it got conflicted.

Источник