Live CSS questions

[DrChiper]

Thanks for this new feature, very usefull.

2 questions:

1. Can the font of the Live CSS panel be adjusted?
   It is a tad big for my taste
2. There is something odd here. The final margin is bigger than the inherited. The preview screen does not reflect this, however.

[kovidgoyal]

1. It uses the same font as the editor

2. The values are whatever the preview panel reports them to be. If your font size is set to 30 odd pt then 1em ~ 36px

[DrChiper]

ehh, I indicated the "margin" setting (not font), which is nowhere changed but differs in the computed final style.

[Divingduck]

Kovid, a very useful tool!

Maybe one point for your help file: explain that @ 26 means at Line 26 in the editor. It took some time to recognize it and understand this helpful information.

[kovidgoyal]

Originally Posted by DrChiper

ehh, I indicated the "margin" setting (not font), which is nowhere changed but differs in the computed final style.

Not sure what you mean? There is font-family: serif inherited from body

[kovidgoyal]

@Divingduck: sure.

[mrmikel]

It's worth noting that this function can be assigned a shortcut key which toggles under Edit Preferences, Keyboard Shortcuts, Windows. I think I don't need this on all the time, but it will sure be great when I am having a problem with something not displaying as I expect. (Which is too darn often!!)

Thanks again, Kovid!

I can see what Dr Chiper means. This is what it looks like on my machine. But I'm just glad to have it!

[arspr]

HEY, GREAT JOB.

It has completely replaced the Inspector in my workflow as it also gives me the ability to directly jump to the place where the style is set... (And as I nearly never use Inspector capability about doing CSS test preview changes on the fly).


Nevertheless two veeeeeeeeeeery small suggestions:

• Originally Posted by DrChiper

  1. Can the font of the Live CSS panel be adjusted?
     It is a tad big for my taste

  Originally Posted by kovidgoyal

  1. It uses the same font as the editor

  I also think it's a bit big. Is it worth an additional font size setting for it?
• I would also like to be able to reorder panel tabs which share the same location (in my case: Live CSS, Inspector, Check Book and Checkpoints) by holding and dragging their tabs. (Instead of needing to rebuilding the group in its final desired order). Feasible?

As implied, Kovid, unimportant suggestions, only if you feel bored and have some free time...

[arspr]

A double post but here I think that I've got some better suggestions and even a possible "bug".

I upload a small test book (don't worry about its title, it's just the book I use for several testings) where I've been playing a little with styles...

I don't know what the HTML/CSS/ePub specs actually say but it really seems that the priority of CSS styles is:

1. style attribute inside the tag.
2. id referenced styles.
3. class referenced styles.
4. tag referenced styles.
5. inherited styles.
6. In case of conflictive definitions, the highest priority goes to the style defined in the same html file and then to the linked css style files.
   • Within the same location, the highest priority goes to the last defined entry. I mean a style in line 2 has lower priority than a style in line 85
7. More over, even without being conflictive, classes can be defined in several places and also several classes can be applied to the same tag. In this case:
   1. The first rule is the location one. Classes from the very same html file have higher priority than classes from linked CSS files.
   2. Within the same location, when they are not conflictive, they are alphabetically sorted. .a class has higher priority than .z one

Well, I have two suggestions:

• Would it be possible to strike through the overridden settings in the same way the Inspector does?
• (In this one there's a very high possibility about saying tons of nonsense per second. Be warned). Kovid, please check the displayed order you have in Live CSS. It appears that you are displaying the styles from the very same html file always before the styles from linked CSS files, even if they have lower priority. I mean compare both "full" screenshots, you are displaying the blue p style from the html file before the orange and gold classes and even the much higher priority magenta id style from the linked CSS style file.
  Nevertheless this is just a "rendering" issue. The computed final style is correctly evaluated. See the "Wrong order in CSS Live but good evaluation" screenshot where I've just deleted the in-tag red style color.
  But if I have not made any mistake, "fixing" the shown order to match the real one (as Inspector does) would be great, as it can be confusing.

[arspr]

Originally Posted by DrChiper

ehh, I indicated the "margin" setting (not font), which is nowhere changed but differs in the computed final style.

It's the very same situation despite margin, font-size or whatever other property.

"em" measure units are relative. As example 4em means "4 times whatever base size you have". Because of that, in the end you need to convert them to "absolute" sizes. And that is what you are getting. The computed final size cannot be "em", it must be pixels.

And remember that they are applied in cascade when inherited, they are NOT overridden in this case. If your base size is 15 pixels, your body is 2em and your h1 is 3em, you end with h1 being 90 pixels (15 x 2 x 3), not 45 pixels (15 x 3).

But matched rules are still overridden. If h1 is still 3em but h1.myclass is 4em, you will end with 15 x 2 (from body) x 4 (from .myclass) = 120 pixels. 3em is not applied any more.

[BetterRed]

I moved the Live CSS window under the file list, it would be nice if it used the same 'style' as the file list (font, background colour etc)

More than happy to wait for 'full on' UI customisation.

BR

[kovidgoyal]

@arspr: CSS rule priority is more comples than that. http://www.w3.org/TR/css3-selectors/#specificity

And yes, it is on my todo list to to indicate overriden properties.

As for the order they are shown in, the order is not going to change, it will allways be style attirbute, rules matched from inline style tag, rules matched from included stylesheets (in the order they are included), inherited rules from ancestors.

As for the font size, I am not sure I understand why you find the same font ok in the editor and too large in live css. I can probably add a config option to have live css use the geenral ui font instead of the editor font, but I am not going to add a separate font size control for it.

[arspr]

Originally Posted by kovidgoyal

@arspr: CSS rule priority is more comples than that. http://www.w3.org/TR/css3-selectors/#specificity

I leave Chinese for my next life... Too alien for my limited brain. I fully trust in you.

And yes, it is on my todo list to to indicate overriden properties.

As for the order they are shown in, the order is not going to change, it will allways be style attirbute, rules matched from inline style tag, rules matched from included stylesheets (in the order they are included), inherited rules from ancestors.

On second thoughts you're probably completely right. If you fully mimic Inspector, you already had Inspector from the beginning...

In this way we have styles sorted by source rather than Inspector's priority

Although, because of that, mrking overridden entries becomes much more critical. Glad to hear that it is in the ToDo list.

As for the font size, I am not sure I understand why you find the same font ok in the editor and too large in live css. I can probably add a config option to have live css use the geenral ui font instead of the editor font, but I am not going to add a separate font size control for it.

I think the weirdness feeling about the font size or appearance comes from every other panel (Checkpoints, Check Book and Inspector) having smaller/different font.

[BobC]

Originally Posted by kovidgoyal

As for the font size, I am not sure I understand why you find the same font ok in the editor and too large in live css. I can probably add a config option to have live css use the geenral ui font instead of the editor font, but I am not going to add a separate font size control for it.

@Kovid For me the font size isn't a real issue, however the fact there is a blank line (or the equivalent vertical space) between each line of the css display does restrict the overall view. Is it possible to reduce this excessive spacing ?

Another issue seems to be that the live css window has vertical scroll capability but not horizontal, meaning it isn't possible without maximising the window to read all of some longer lines.

BobC

[arspr]

Originally Posted by arspr

On second thoughts you're probably completely right. If you fully mimic Inspector, you already had Inspector from the beginning...

In this way we have styles sorted by source rather than Inspector's priority

Although, because of that, mrking overridden entries becomes much more critical. Glad to hear that it is in the ToDo list.

Entering brainstorming and desire mode about the overridden mark:

Could marking not only the overridden state but where it is being overridden possible? And a link to that overriding style?

I mean something like this (as an idea):

color: blue by .HiPriorityClass in whateverFile.css

where the property would be stricken through, not underlined, (but I cannot do it in this Mobileread forum), and, of course, the last blue whateverFile.css would be a link to that position.