« Session Managment
CSS inheritance issue
Mail entities and stuff. »

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
CSS inheritance issue
« on April 11th, 2013, 07:20 PM »
So, I want to add a new icon to the buttons, we have a tick and a cross and stuff like that, and I want to add a (!) button (i.e. using the warning icon)

Now, I don't want this in the main index.css file for obvious reasons so I thought, you know what, I'll put it in index.member.css, and extend input.submit that way.

So index.member.css has:
Code: [Select]
input.warn extends input.submit
background: url($images/warning_ban.gif) no-repeat
background-color: #fff0e3
:hover
background-color: #fff5e8

Except, and this is the troublesome part, this part is declared, effectively, before my input.warn class:
Code: [Select]
// Declare position only here, so that inherited classes can also set it.
input.submit
background-position: 5px center

So background-position gets overridden by input.warn's own declaration.

I don't know how to deal with this in a good way since index.member.css stuff is loaded after index.css, but I don't really want to add this to index.css if I can help it. I think I'll just have to add background-position directly to input.warn :(
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #1, on April 11th, 2013, 08:01 PM »
i don't get it. I'll have to look into the code in context.

Did you try with a mixes instead..?
I tend to use them a lot these days. Sometimes they compress better ;)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: CSS inheritance issue
« Reply #2, on April 11th, 2013, 09:43 PM »
The context is straight forward - input.submit declares some stuff, for its main declaration, further down - but *after* all the main input.whatever classes. And then input.member.css is declared after that.

I don't see a mixes would solve this - it's simply that unless input.submit's declaration for background-position is somehow after the content of index.member.css being included, it can't be done.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #3, on April 12th, 2013, 12:15 AM »
Oh...
extra.css then..? It's what this one is there for... ;)

So, extra.member.css is good to ensure it's added after index files, and still restricted to members. Or just extra.css.
This is for a core feature..? Like, in the Wedge SVN? I suppose not, otherwise you'd have added it directly to index.member.css..?

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: CSS inheritance issue
« Reply #4, on April 12th, 2013, 12:18 AM »
Quote
This is for a core feature..? Like, in the Wedge SVN? I suppose not, otherwise you'd have added it directly to index.member.css..?
That's the point. I DID add it to index.member.css. But it doesn't work! It needs to use the first half of input.submit's definition (because it extends input.submit) but it needs to be declared before the end of input.submit's declaration (the bit I quoted) because the background declaration in input.warn overrides input.submit's declaration of background-position.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #5, on April 13th, 2013, 09:45 AM »
Okay, I had a quick look, and I can't for the life of me remember why I did that background-position thing, especially since it doesn't match the description... :-/ I would logically have added a 'final' keyword to the input.submit re-declaration, and this would have have the effect of doing exactly what you wanted, i.e. no influence over your background-position. Except, the other buttons also need the same background-position...
Honestly, I can't remember either why I did all of this weird stuff in button declarations. I do remember fixing a lot of bugs across multiple browsers, and that there were many precedence problems. I think one of these bugs took me days to fix..

Still. I don't see why you're not declaring this way..?

Code: [Select]
input.warn extends input.submit
background: #fff0e3 url($images/warning_ban.gif) 5px center no-repeat
:hover
background-color: #fff5e8

Doesn't compress as well, I reckon, but still, no precedence problem..?
Or simply -- just add the background-position: 5px center line in there as well...

The idea is that 'background' is a shorthand, so if no position is declared, it'll be set to '0 0', so you need to reset it immediately after...
Maybe inheritors should instead declare background-image, not background. Maybe I should do that too, to 'set an example'...

There are plenty of ways to fix this. Ideally, we want the one that compresses better and is the easiest to modify for plugin authors...

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: CSS inheritance issue
« Reply #6, on April 13th, 2013, 03:57 PM »
Quote
Still. I don't see why you're not declaring this way..?
Because I started out by copying what the others did :P

And yes, when you put 5px center in there, there's no inheritance problem because it's explicitly redeclaring the bit that was being overridden...

This is what I was getting at, I'm well aware that in the background shorthand, it's 0 0 - except it was supposed to be inheriting from an existing one, I didn't want it to be overridden.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #7, on April 14th, 2013, 05:02 PM »
I'm probably going to go for the background shorthand route when it comes to declaring input.submit (including position and background-color), and remove the background-position declaration that was a bit below... I'll need some testing though, because it all doesn't make sense, and I want to ensure I didn't do that because of a special issue.
Re: CSS inheritance issue
« Reply #8, on April 14th, 2013, 08:19 PM »
So... Right now, in order to have a working button, you just need to do this.

Code: [Select]
input.new mixes .button-padding
background: url($images/buttons/new.png) 5px center no-repeat
background-color: #e0eaf6

This new method saves about 60 bytes in the regular gzipped file. It actually moves the :hover stuff to the basic button styling, and uses a box-shadow trick to reproduce the hover effect. It's not exactly the same, but it's similar.
(Using 'extends' instead of 'mixes' is possible, but saves 11 bytes from what I could see in my implementation... Goes to show how important repetition is, for gzip ;))

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: CSS inheritance issue
« Reply #9, on April 14th, 2013, 11:43 PM »
What is the benefit compared to:
Code: [Select]
input.warn extends input.submit
background: url($images/warning_ban.gif) 5px center no-repeat
background-color: #fff0e3
:hover
background-color: #fff5e8

I still need to set all the colours, all the other stuff gets inherited.

If I'm honest, this is why I don't touch the style code unless I have to because it doesn't seem to matter what I do, it's at least three generations behind how you're doing it.

* Arantor is tempted to remove the changes except those 'strictly' necessary, seems easier. Saves more bandwidth too.
Posted: April 14th, 2013, 10:18 PM

Removed extra button, saves even more bandwidth that way.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #10, on April 15th, 2013, 12:03 AM »
Lol... ;)

Anyway... To answer your question, the main thing with my rewrite is that you no longer have to provide a :hover with a new color. All buttons are now properly 'lighted' when hovering them, with a specific box-shadow setting.

I'll try to commit these things tomorrow. Along with a host of other changes to CSS... Don't worry though, nothing potentially game-breaking for you.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: CSS inheritance issue
« Reply #11, on April 15th, 2013, 12:06 AM »
It would be hard to break anything, the grand total of CSS changes is currently:

Code: [Select]
/* And for the infraction history. Guests cannot see it.
------------------------------------------------- */
$inf_active = #cfc
$inf_expired = #f8faf8
$inf_revoked = #ffc

.windowbg.inf_active
background-color: darker($inf_active, 3%)
.windowbg.inf_expired
background-color: darker($inf_expired, 3%)
.windowbg.inf_revoked
background-color: darker($inf_revoked, 3%)

.windowbg2.inf_active
background-color: $inf_active
.windowbg2.inf_expired
background-color: $inf_expired
.windowbg2.inf_revoked
background-color: $inf_revoked

(this way I get to alternate colours nicely)

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #12, on April 15th, 2013, 12:12 AM »
Add a 'final' keyword to all of these windowbg-related selectors, and please tell me how many bytes this saves in your gzipped CSS, if any ;)

That's because with your CSS, any classes that inherit from windowbg will also be applied to this. ^^

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: CSS inheritance issue
« Reply #13, on April 15th, 2013, 12:14 AM »
Even though it's in index.member.css and declared after everything else? ;)

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: CSS inheritance issue
« Reply #14, on April 15th, 2013, 07:54 AM »
Yes. Do you want me to quickly re-explain what keywords do what..?
« Session Managment
Mail entities and stuff. »