HTML5 and CSS3

[roundcode]

Hi,

I've been trying out the trial version of HippoEdit, and like the program very much!

However, I noticed that HTML5 and CSS3 are not yet fully supported in the HTML or CSS editor.
For example, code formatting does not indent html5 tags (nav, section etc.) and when writing "text-shadow" it gets the CSS error color.

Any idea when these syntax additions will be added to the editor?

[alex]

H roundcode,

welcome of forum.

Generally you can add it easy by yourself and have the schema immediately. The html syntax defined in file %HIPPOEDIT_USER_FOLDER%\data\syntax\html_spec.xml  and CSS in %HIPPOEDIT_USER_FOLDER%\data\syntax\css_spec.xml. You can find path to user folder in About box. I think <SCOPES> and <STYLES> nodes should be extended.

But maybe it will be more correct to create new schemes for HTML5 based on old html schemes, if somebody would like to have different highlighting schemes for HTML4/5 (even if you have two schema installed you can disable one you do not want to use).
If you will need any help in creating of syntax schema, just ask, I will provide help asap.

I can modify the schema by myself, but in any case I need somebody to verify. From another side, for creating of new syntax schema you can get license for free.

Details about creating of syntax schemes can be found here.

BR, Alex

[roundcode]

Hi,

Here's my attempt at creating a HTML5 spec. Comments and corrections are welcome! 

BTW, shouldn't all the scopes be set  strict="true"?

[alex]

not bad I have checked changes you have done and see that in addition to adding new scopes/keywords, you have also deleted some... My question is: are they were wrong, or just not allowed in html5 context (as frame, u, tt for example). While if this is only html5 specific, it was right to create completely new schema for it (while currently it is not easy to exclude inherited entries in child schema), but if this deleted entries was just wrong that it makes sense to delete them in original html_spec.xml and inherit html5 spec from it, adding only new additions.

Default value for strict is true. So you do not need to set it explicitly. But if you would like to set it to false (this is needed for scopes that not always have a close tag), you need to add it.

[roundcode]

Hi,

Yes, I've deleted all the depreciated elements and tags from the html5 schema.
I think it makes sense to have separate schema for html5 - some of the html4 elements and attributes are no longer allowed.

Glad to know that strict defaults to true! 

Next I'll take a look at adding a CSS3 schema as well...

[alex]

Yes, I have seen that changes from html_spec to html5_spec are rather big. So, I think you are right. With inheritance, I just want to minimize redundancy and do not force people to change some common part in all versions. But of course this should be done only if this makes sense.

Send me your registration mail to supportbox at hippoedit - I will send you the license (hope this will not stop you from checking css3 ). 

I will also publish HTML5 version in syntax library. If you will have some updates, please inform me, that I can update it also.

[roundcode]

OK, I will double-check the schema and I'll let you know if there are updates to be made.

Thx for everything, I'll send you an email later. Don't worry, I'll look into CSS3 also

[roundcode]

Here's an updated & edited version. Quite a few keywords added, plus a few typos corrected. 

[alex]

Thanks a lot. License already sent

Both schema and template are perfect, will place both to library, but in some days. Just noticed bug on web site that it does not collects template files correctly and also pack them wrong (wrong directory :/ ). Will correct this and will update library.

And here, as promised some additional info that can be useful:
- you can put also description for keywords, which will be displayed in code completion or on Quick Info request (Ctrl+Shift+Space). Can be useful, but of course much more work. Example:

Code (xml) Select Expand

<Keyword text="alpha" descr="α - alpha"/>
- it is possible to use code templates inside of file templates. In this case when user will create a new file using the template, some stuff can be prefilled and some parts can be queried. Format as in other places (tools or code templates). For example, this fills author automatically, when used in file template:

Code (html5) Select Expand

<meta name="author" content="%USERNAME%" />
- if you will add some code templates for html5, do not forget that other can be also interested Tools->Options->Syntax Settings->HTML5->Code Templates (than stored in html5_user.xml).
- I know that you have tried 1.50 and you know js, so maybe you will be interested in adding some script plugin. More info can be found here. And an example. It adds new button on toolbar + command to assign shortcut and interactively inserts link.

Best regards,
Alex.

[roundcode]

Hi,

Here's another update to the html5 spec - I  added descriptions for the main element keywords, and also included the "b" element which was missing 

[alex]

Perfect, looks great Now HTML5 schema become more complete as original html_spec
Thanks a lot!

[attachimg=1]

HTML5 schema is published in library together with file template.

[roundcode]

Okay, here's the first version of the CSS schema enhanced with CSS33. I've commented my additions to make things easier to organize...
CSS3 is still in draft stage, even though all modern browsers support many of the new additions. I've added only those features which have the most
extensive browser support at the time of writing...

First, I have a couple of questions & suggestions regarding the css schema:

- I think css3 elements and attributes should be included into the css schema?
- I think we should add a couple of new styling options (keywords for color schemes) to the css schema:
1. New color option for "CSS3" (all the new additions can be given a different color)
2. New color option for "CSS pseudo-classes" (the ones starting with ":" prefix). I've added the keywords to the schema.
3. New color options for elements starting with @ symbol:
@media ("Media queries")
@-moz-keyframes ("Keyframe animation")
@-webkit-keyframes ("Keyframe animation")
@-ms-keyframes ("Keyframe animation")
@keyframes ("Keyframe animation")
@font-face ("CSS3 web fonts")

Second, I'm afraid I need your help with defining syntax for these cases - they have brackets within brackets:

1. Media queries:
@media (min-width: 481px) and (max-width: 768px) {
   #element { width:740px; }
   .another_element { color:red !important; }
}

2. Keyframe animations:
@keyframes mymove {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

Third, should we also import elements from HTML5 schema into the css schema? Is it possible to import elements from two schemas? Like

<Style id="htmlelements" name="HTMLElements" inherit="html:elements" image="13" bold="0" italic="0" underline="0" clr="Keyword" bkclr="#FFFFFFFF"/>
<Style id="html5elements" name="HTML5Elements" inherit="html5:elements" image="13" bold="0" italic="0" underline="0" clr="Keyword" bkclr="#FFFFFFFF"/>

[roundcode]

Just noticed a problem in the new HTML5 spec: the "tittle" tag.
Inside head-section, the usage is "<title>Page title</title>", but for any other html5 element inside body, you use "<img src="image.png" title="Image title">.

I noticed that in HTML schema, this has been fixed by setting <Scope open="title" close="title" strict="false"/>. However, this is not correct, because it allows one to leave title tag open in the head section.

Could we add a condition, that when inside the head-section the title must be closed, but inside body it does not have to be?

[alex]

Sorry for delay with response.

About HTML schema:
If it will be so easy to fix problem with title tag, I would did do it already
No, for current moment there is no way to define such condition. There is a way to limit scopes for some containers, but they are same in both cases. Also some conditions can be applied to scopes itself, but they rather limited. So, I think for current moment it is fine (even than from spec it is wrong definition ), and for future I will try to extend rules, that such condition can be defined.

Please also update your version with html5_spec version from library, I have corrected some problems in your schema (<> in descriptions were not encoded).

CSS3
Here is even worse

<Style id="htmlelements" name="HTMLElements" inherit="html:elements" image="13" bold="0" italic="0" underline="0" clr="Keyword" bkclr="#FFFFFFFF"/>
<Style id="html5elements" name="HTML5Elements" inherit="html5:elements" image="13" bold="0" italic="0" underline="0" clr="Keyword" bkclr="#FFFFFFFF"/>

This can be done without problems, should work, just would be duplicates.

Yes, CSS schema can be modified. If this make sense (I am not a big expert here, but prefer to update existing schema than creating new one ).

It is possible to create new styles for keywords started with @. For pseudo classes can be problematic, while : already used in schema... Something should be dropped. HE does not have full powered regular expression support for syntax definitions, so there are significant limitations. For Keywords started with @ it is also possible to add predefined set of keywords (like this done for php $ vars or html entities).

For braces in braces, we can try but I am not sure Definition of CSS schema was single schema I have tried to define intellectual syntax rules, that use {} not only as scope definitions but also as syntax blocks and heavily used container limitations... There were some problems.
But we can try One by one till best what is possible with current rules.

I have uploaded css version with some modifications. With media seems to be complicated, while I am not able to find end tag. Using of { results in unclosed } brace and not determined scope for attributes.

[roundcode]

OK, I understand that the double brackets are problematic. Hopefully the schema system will improve in the near future, so those can be added in.

For now, I think its fine if we just include the new CSS3 keywords and new color styles for CSS3, @-rules and pseudo classes.

I'll go through the spec and double check all the new additions are OK, I'll post my updates in this thread.