Common CSS Parser Errors (Parsing Errors Found)

Follow

Back to Themes FAQs

The Spark Pay online stores CSS parser requires CSS to be written in a specific way. You will not have to learn any new CSS. However, the parser has some specific requirements. It will show a Parse Error and the line number if it detects something that does not meet the requirements.

CSS Parser Requirements:

  • All CSS properties must have a semicolon after them.
  • A CSS property cannot be included twice in the same ruleset.
  • All rules must have opening and closing curly brackets (  {   }  ) (this is true for any CSS work).
  • All quotes must be closed (this is true for any CSS work).


In this example the css rule for the h1 tag does not have a final semicolon after the color property/value.




In this example the closing curly bracket is missing:


Duplicated CSS property.

Note: If you are moving this CSS from somewhere the last occurance of the property is the one that applies.


Missing quotation mark:



Obviously this is what you want to see.


If you are copying CSS from another source and are having parsing errors, the first thing to check is the final semicolon.

An easy way to fix this is to paste your CSS code into an editor such as Notepad++ and do 2 find/replaces.

First replace all instances of the ;} (semicolon curly bracket) with just a } (curly bracket)

Use a Regular Expression search for ";\s}" and replace with "}}}" (use three brackets to not bother empty rules such as {  } )
This will find ;} as well as ; } (with space(s) )


Then do the opposite and replace "}}}" with "; }" (or ";}" )


This will give your css rules the proper closing bracket form.


Back to Themes FAQs

Have more questions? Submit a request

Comments

  • Avatar
    Noel Sufrin

    In the first example, you state "In this example the css rule for the h1 tag does not have a final semicolon after the color property/value."

    That's incorrect. The example shows a semicolon, however the error is immediately following "font-family", and is missing the colon.

    The next example pic actually shows the same line of CSS correctly on Line 3 h1...

    Just in case another self-helper is pulling their hair out trying to find it. :P

  • Avatar
    David Mioduszewski

    Clicking the link "Back to Themes FAQs" brings up a 404 error message

  • Avatar
    Brandi Lovett

    Thank you very much David. This has been fixed!

  • Avatar
    Юлия

    Remember that you can't use media, you'll never see the error if you not using global css editor and if you use comments inside the style, the whole line can be occasionally replaced by the comment only after you select new buttons.