Live CSS questions - Page 2

kovidgoyal · 05-24-2014, 08:31 AM

You already know where it is overriden, just look for the same property somewhere where it is not struck out. And FYI, overriden indication is already implemented.

@BobC: There isn;t a lines worth of whitespace between the lines, but it could probably be tightened a little, I will look into that.

phossler · 05-24-2014, 09:39 AM

@Kovid -- New Live CSS window will be VERY helpful for us non-professional newbies. A lot of thought went into making the UI very UF

I like the

a. Expand / Collapse triangles for the tree branches
b. The css hyperlink taking you directly to the appropriate point in the style sheet.

Minor suggestions:

c. Horizontal scroll bar on the window would be nice
d. An [Expand All] and [Collapse All] icon on the window would be nice. Possibly the default would be to open with all collapsed except the Computed node
e. The "Inherited From" font could be decreased a little (did not see a Editor setting) and the spacing between lines could be decreased to allow more information to be displayed

Thanks again

BetterRed · 05-24-2014, 11:16 AM

@arspr - Strikeout can be done via the strike BBcode tag

BR

arspr · 05-24-2014, 05:15 PM

Quote:

Originally Posted by kovidgoyal

You already know where it is overriden, just look for the same property somewhere where it is not struck out. And FYI, overriden indication is already implemented.

Wow! that was a fast ToDo>Done transition...

Nevertheless, what I wanted is somehow merging the info given by Inspector, where you can know every single step in the overriding process (because that's how styles are sorted), and your Live CSS features. I mean knowing in each overridden step/style, which is the setting that actually kills it, despite if that killer setting is itself dead because any other one with higher priority.

With this feature, while looking at nested tags you could also detect CSS style conflicts or troubles in the parent tags or classes. In my own experience it's not so uncommon being looking for style troubles in a deep <span> tag and then noticing that, related or unrelated with them, there are some troubles in the <div> vs <body> relation, at least two steps up.

But I don't know the coding effort involved...

Quote:

Originally Posted by BetterRed

@arspr - Strikeout can be done via the strike BBcode tag

BR

Thanks, how did you know? I mean, there's NO button in the interface to do it (I had pressed them all). Is there a wiki page or something like that?

BetterRed · 05-24-2014, 05:33 PM

Quote:

Originally Posted by arspr

Thanks, how did you know? I mean, there's NO button in the interface to do it (I had pressed them all). Is there a wiki page or something like that?

lucky guess - I use BBCodeExtra addon, I outfitted it with a custom tag for strike, also works on other VBulletin boards, many phpBB boards allow strikeout or just an s

Dunno why so few BBCode boards don't advertise strikeout. I guess TPTB figure if one can strikeout something out then one could just as easily correct it... Ψ²

BR

PeterT · 05-24-2014, 05:40 PM

See https://www.mobileread.com/forums/faq...aq_vb3_posting and then https://www.mobileread.com/forums/misc.php?do=bbcode

Also, any time you see a feature being used that you don't know, try a QUOTE of the message and look at the displayed BBCODE in the quote box.

kovidgoyal · 05-24-2014, 11:33 PM

@arspr: The inspector does not sort rules by selector specificity. Try the following simple experiment: Add !important to a property from a stylesheet and add the same property to a style attribute. Even though the property from the stylesheet wins, the inspector will show the property from the style attribute first.

Indeed sorting by selector specificity makes no sense, it would result in a list that is very difficult to understand, since selector specificty is very complex.

And inherited properties are shown in order of tag inheritance in Live CSS, which makes much more sense than selector specificity.

arspr · 05-25-2014, 02:38 AM

Thanks, BetterRed and PeterT. Very useful information.

@Kovid. Also many thanks for your info. Indeed, I forgot about the !important feature which can make one style override some properties even being themselves in a "naturally" lower priority place (or specificity, being proper), but not others.

But also because of that, my suggestion could be a nice touch to your source sorting because it could show the user the hierarchy of the CSS styling, property by property in each style.

As I already said, you really convinced me about sorting just by source location.

But, as I also said, I don't know how much coding effort is needed, or even if you just don't want to spend a single minute on it... Whatever you decide is perfect.

user743 · 05-26-2014, 10:33 AM

Quote:

Originally Posted by BobC

@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?

BobC

Same with file browser. Can the spacing be reduced?

05-24-2014, 09:39 AM	#17
phossler Wizard Posts: 1,078 Karma: 412718 Join Date: Jan 2009 Location: Valley Forge, PA, USA Device: Kindle Paperwhite	@Kovid -- New Live CSS window will be VERY helpful for us non-professional newbies. A lot of thought went into making the UI very UF I like the a. Expand / Collapse triangles for the tree branches b. The css hyperlink taking you directly to the appropriate point in the style sheet. Minor suggestions: c. Horizontal scroll bar on the window would be nice d. An [Expand All] and [Collapse All] icon on the window would be nice. Possibly the default would be to open with all collapsed except the Computed node e. The "Inherited From" font could be decreased a little (did not see a Editor setting) and the spacing between lines could be decreased to allow more information to be displayed Thanks again Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Questions about CSS and best practices	graycyn	ePub	8	03-18-2012 04:15 PM
External CSS file questions	michaelbr	Sigil	10	01-27-2011 08:08 AM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM
a few extra css questions	marbs	Recipes	12	11-20-2010 10:15 AM
CSS Questions	JTAL604622	Calibre	0	11-18-2010 06:33 PM

05-24-2014, 08:31 AM	#16
kovidgoyal creator of calibre Posts: 43,869 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	You already know where it is overriden, just look for the same property somewhere where it is not struck out. And FYI, overriden indication is already implemented. @BobC: There isn;t a lines worth of whitespace between the lines, but it could probably be tightened a little, I will look into that.

05-24-2014, 11:16 AM	#18
BetterRed null operator (he/him) Posts: 20,588 Karma: 26954694 Join Date: Mar 2012 Location: Sydney Australia Device: none	@arspr - Strikeout can be done via the strike BBcode tag BR

05-24-2014, 05:40 PM	#21
PeterT Grand Sorcerer Posts: 12,176 Karma: 73448616 Join Date: Nov 2007 Location: Toronto Device: Nexus 7, Clara, Touch, Tolino EPOS	See https://www.mobileread.com/forums/faq...aq_vb3_posting and then https://www.mobileread.com/forums/misc.php?do=bbcode Also, any time you see a feature being used that you don't know, try a QUOTE of the message and look at the displayed BBCODE in the quote box.

05-24-2014, 11:33 PM	#22
kovidgoyal creator of calibre Posts: 43,869 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	@arspr: The inspector does not sort rules by selector specificity. Try the following simple experiment: Add !important to a property from a stylesheet and add the same property to a style attribute. Even though the property from the stylesheet wins, the inspector will show the property from the style attribute first. Indeed sorting by selector specificity makes no sense, it would result in a list that is very difficult to understand, since selector specificty is very complex. And inherited properties are shown in order of tag inheritance in Live CSS, which makes much more sense than selector specificity.

05-25-2014, 02:38 AM	#23
arspr Dead account. Bye Posts: 587 Karma: 668244 Join Date: Mar 2011 Device: none	Thanks, BetterRed and PeterT. Very useful information. @Kovid. Also many thanks for your info. Indeed, I forgot about the !important feature which can make one style override some properties even being themselves in a "naturally" lower priority place (or specificity, being proper), but not others. But also because of that, my suggestion could be a nice touch to your *source* sorting because it could show the user the hierarchy of the CSS styling, property by property in each style. As I already said, you really convinced me about sorting just by source location. But, as I also said, I don't know how much coding effort is needed, or even if you just don't want to spend a single minute on it... Whatever you decide is perfect.

Advert

Advert