Author Topic: CSS and media rule  (Read 836 times)

Offline Disker

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
CSS and media rule
« on: June 23, 2016, 02:27:05 am »
It seems that lines under @media are showed incorrect.
E.g.

@media screen and (min-width: 500px)
{
  #abovefooter {
    padding-bottom: 9.0em;
  }
}

#abovefooter is RED, as an error.
 


Offline alex

  • Developer
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2161
  • Karma: +37/-3
    • View Profile
    • HippoEDIT
Re: CSS and media rule
« Reply #1 on: June 23, 2016, 10:09:43 pm »
Hi Disker,

welcome to the forum.

I would say it is by design. All "unknown" attributes marked with "error" color. See style below from the css_spec.xml:
Code: XML
  1. <Style id="attributes" bold="2" italic="2" underline="2" clr="Error" bkclr="#FFFFFFFF" abstract="true"/>
(the style is invisible in settings, while marked as abstract).
This is not only with media but with any other class also.

BR, Alex.
P.S: You can see all styles under the cursor with this trick: http://wiki.hippoedit.com/syntax/styles/stack . Unfortunately, while mentioned style does not have name, it is not so obvious to find that it is it. I will fix this in next build, to show also ids of the style if name is not available.

Offline Disker

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: CSS and media rule
« Reply #2 on: June 24, 2016, 01:50:04 am »
Hi Alex,
I'm not about styles and incorrect or unknown attributes.

The subject is HippoEdit is not working properly with the @media CSS rule.
Any attribute's name (but not attribute value) is marked with "error" color.

The same lines without the @media rule are marked correctly.

 

Offline alex

  • Developer
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2161
  • Karma: +37/-3
    • View Profile
    • HippoEDIT
Re: CSS and media rule
« Reply #3 on: June 28, 2016, 11:48:05 pm »
Hi,

sorry for the delay with the response.

I am not big expert in CSS and media rule, but I am an expert in HippoEDIT syntax schemes :)
I have done for CSS some "sophisticated" syntax definition, that even for me is now difficult to understand that, but I still think it works as designed.
For example, this code, which definitely is wrong, but it shows what I meant, from definition point of view:
Code: CSS
  1. @media screen and (min-width: 500px)
  2. {
  3.         padding-bottom {
  4.         }
  5.  
  6.         #abovefooter {
  7.     padding-bottom: 9.0em;
  8.   }
  9. }
  10.  

the first "padding-bottom" will be not highlighted in red color. While "padding-bottom" is one of the known attributes in the scheme.
I would say that the scheme is not fully properly defined, but there is no "bug".
HippoEDIT does not have any built-in special logic for special syntaxes. Everything is based on XML syntax schemes and if you need better highlighting the only way that exists to extend the scheme, using possibilities that are available.

There is no special style for @media rule block, it processed as any CSS class, and as far as I know, you can not have nested CSS classes. That is why you class names given inside are red - because HippoEDIT expects there an attribute, but not any class name.

The solution I see is to extend the scheme in that way, that @media rules are treated differently, or just to allow attributes and class names to be in any scope.

BR, Alex.

Offline Disker

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: CSS and media rule
« Reply #4 on: July 05, 2016, 04:55:18 pm »
By the way, if the @media group contains more than 9 nested classes, 10 and another classes are highlighted correctly.



Offline alex

  • Developer
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2161
  • Karma: +37/-3
    • View Profile
    • HippoEDIT
Re: CSS and media rule
« Reply #5 on: July 07, 2016, 12:14:34 am »
Hm, was not able to recreate that. As with more than 10 times deep nesting and with 10 classes on the same level.. And honestly do not see, how this may happen. I do not have any limits on nesting depth :)

About the problem with media rule... I was thinking, but still, can not find a good solution...
1) I can not create a new style for media rule only that will distinguish from a normal class. HippoEDIT supports lookbehind/ahead  but I can not find matching rule, to detect that in front of { is a media rule but not a normal class. Or it may be too expensive (actually, it only goes back till beginning of the line).
2) I may remove extended styles, define that inside of the class may be only attributed, but it will lead to the result, that attributes will be allowed and highlighted everywhere. And also will be suggested.
3) I may only remove Error color for not define attributes.

As for 3) please try to change line:
Code: XML
  1. <Style id="attributes" bold="2" italic="2" underline="2" clr="Error" bkclr="#FFFFFFFF" abstract="true"/>
to
Code: XML
  1. <Style id="attributes" bold="2" italic="2" underline="2" clr="Window Text" bkclr="#FFFFFFFF" abstract="true"/>
in css_spec.xml in HippoEDIT/data/syntax folder.

What do you think?

BR, Alex

Offline Disker

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: CSS and media rule
« Reply #6 on: July 18, 2016, 11:33:24 pm »
Thanks for the solution.
I like the result with id="attributes".

However the following lines' color is still incorrect:

  .menu a:hover {
    padding: 0.4em 3.0em;
  }

'hover' and 'padding' are red, and there is an incorrect pointer of the the braces pair.   

 

Related Topics

  Subject / Started by Replies Last post
3 Replies
1904 Views
Last post June 16, 2015, 01:25:47 pm
by alex