search

XhmikosR / notepad2-mod

LOOKING FOR DEVELOPERS - Notepad2-mod, a Notepad2 fork, a fast and light-weight Notepad-like text editor with syntax highlighting
https://xhmikosr.github.io/notepad2-mod/
Other
1.45k stars 270 forks source link

Highlighting issue with CSS pseudo-classes/elements #46

Closed Phanx closed 11 years ago

Phanx commented 11 years ago

Version: Notepad2-mod (64-bit) 4.2.25 r858 (3f0683d) Operating system: Windows 7 Professional (64-bit)

Steps to reproduce:

  1. Set the scheme to "CSS Style Sheets"
  2. Type:
    img:before { content: "x"; }
    img::before { content: "x"; }

Expected result:

The keyword before in each of the example lines should be highlighted using the "Pseudo-class/element" settings.

Observed result:

The before preceded by a single colon (first line) is highlighted as "Pseudo-class/element". However, the before preceded by a double colon (second line) is highlighted as "Unknown Pseudo-class".

Detailed explanation:

In earlier versions of CSS, a single colon was used for both pseudo-classes (eg. img:first-child matches any img element that is the first child of its parent element) and pseudo-elements (eg. img::before creates a "virtual element" that appears directly before each img element in the document).

Nowadays, the correct notation is to use a single colon for pseudo-classes, and a double colon for pseudo-elements. Though all current user-agents still recognize pseudo-elements with single colons (for compatibility reasons) it is very helpful as a developer to use the more distinct notation so when I'm looking at my code (or someone else's code) I can immediately tell what's what.

Ideally, Notepad2-mod should have separate highlighting settings for pseudo-classes and pseudo-elements, but that's probably a lot more work, and it's not that important, so it should just highlight them both the same.

XhmikosR commented 11 years ago

You should always see how Scite handle these.

Phanx commented 11 years ago

SciTE appears to handle these correctly. Pseudo-classes and pseudo-elements get (very slightly) different colors, while invalid pseudo-classes and invalid pseudo-elements are both clearly highlighted as "unknown".

scite-css-pcpe

QWp6t commented 11 years ago

According to MDN, :after and :before is CSS2 syntax and has better compatibility. Calling ::after more "correct" than :after is ... interesting. They are just different specs. CSS2 is still valid and correct.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Nevertheless, I am currently working on a fix for this since you're correct that it should support the CSS3 syntax for pseudo-elements. I should be done with the patch within an hour (I'm just doing some research first). I'll just add it to my current Pull Request.

Phanx commented 11 years ago

I'm not aware of any industry where older standards are considered "more correct" than newer standards, so yes, I'd call CSS3 syntax "more correct" than CSS2 syntax. Also, since the only browser with statistically significant market share that doesn't support the CSS3 syntax is Internet Explorer 8 -- which is currently at about 8 or 9% and on a steady decline -- I'd call any compatibility issues negligible.