First CSS Mod

[code3z]

A draft for a tutorial for CSS modding.

[ghost]

git checkout first-css
git branch --unset-upstream
git branch -m first-css-bkp
git checkout tiosgz-master
git checkout -b first-css
git cherry-pick 6441ed62e24df7078f695927e71e293df68e6ffe
git push --force-with-lease --set-upstream origin first-css

I hope this solves the problem.

[code3z]

@tiosgz What problem are you trying to solve? This branch has no conflicts anymore.

Could you do a very quick check to make sure that the content (not the conventions) is not too objectionable?

[ghost]

What problem are you trying to solve? This branch has no conflicts anymore.

It contains changes from other PRs so it will have conflicts as soon as those are merged (or if this is merged earlier, it will cause conflicts for them & add changes that aren’t supposed to be added with this PR).

Could you do a very quick check to make sure that the content (not the conventions) is not too objectionable?

I’m not sure if this shows enough. All it adds over #36 is that you gotta check several elements. But what about…

• having to deal with different setups? (tabs / address field position…)
• overwriting values? (not just adding !important, but also increasing the priority of the selector)
• inspecting elements that are removed when you unfocus the window? (e.g. tab pop-up thumbnails, address field drop-down)

Why don’t you add something more of the ‘usual workflow’ – whatever yours is? (we could then add more onto it)

[code3z]

having to deal with different setups? (tabs / address field position…)

Good idea, but it might have to go in Tips & Tricks if I can't find a way to fit it in here. Maybe I could deal with both floating and inline panels? So, I guess I will add this one.

overwriting values? (not just adding !important, but also increasing the priority of the selector) Could this go in Tips & Tricks instead? !important works most of the time. Also I'm not sure I can increase the priority of a selector above element.style (can I?).

• inspecting elements that are removed when you unfocus the window? (e.g. tab pop-up thumbnails, address field drop-down)

At first I was going to make changing the tab hover cards (thumbnails) the first CSS mod, but then I thought it would be too complicated. Should I change it to that?

Why don’t you add something more of the ‘usual workflow’ – whatever yours is?

Yeah, that's what I was going for here, it's getting there.

[ghost]

Whoops, the git trick doesn’t seem to have worked. Have you really used all the commands?

~Good idea, but it might have to go in Tips & Tricks if I can't find a way to fit it in here.~ Maybe I could deal with both floating and inline panels? So, I guess I will add this one.

If you think it’s a good showcase – why not?

overwriting values? (not just adding !important, but also increasing the priority of the selector)

Could this go in Tips & Tricks instead? !important works most of the time.

But sometimes it breaks other CSS (even the default).

Also I'm not sure I can increase the priority of a selector above element.style (can I?).

No, but you can increase it a lot even without html:root > body ....

At first I was going to make changing the tab hover cards (thumbnails) the first CSS mod, but then I thought it would be too complicated. Should I change it to that?

You don’t even have to show an actual mod – although it’s better if you do. Just use whatever you think gives you the best showcasing opportunity.

[code3z]

But sometimes it breaks other CSS (even the default).

Could you show me a (practical) example of overriding without !important?

Whoops, the git trick doesn’t seem to have worked. Have you really used all the commands?

Pretty sure. I can do it manually instead. Next time, I won't create a new branch inside Atom.

You don’t even have to show an actual mod – although it’s better if you do. Just use whatever you think gives you the best showcasing opportunity.

Okay, I'll think about what would be best.

[code3z]

I think I will stick with the panels, unless anyone else has a better idea.

[ghost]

Could you show me a (practical) example of overriding without !important?

A simple one could be:

/* This doesn't work without !important, but adding that doesn't care
 * about the accent colour being on address bar / window */
.tab.active {
  color: var(--colorAccentBg);
}

/* This does care. The doubled .active increases priority and is needed
 * because Vivaldi also uses this trick. However, it still needs to care
 * about low-contrast accent */
#browser.color-behind-tabs-on .tab-position .tab.active.active {
    color: var(--colorAccentBg);
}

/* This kinda cares about that as well. Note that you no longer need
 * the doubled .active trick */
#browser.color-behind-tabs-on.theme-light.acc-dark .tab.active,
#browser.color-behind-tabs-on.theme-dark.acc-light .tab.active {
    color: var(--colorAccentBg);
}

/* Now the same reduced thanks to :is() */
#browser.color-behind-tabs-on:is(.theme-light.acc-dark, .theme-dark.acc-light) .tab.active {
    color: var(--colorAccentBg);
}

[code3z]

@ortiza5 What do you think?

[ghost]

It seems to me like you’re going too much into details, like if the people never used CSS. And pls remove the unrelated change in basics/devtools.md, it has nothing to do with this PR.

[code3z]

Ok. The devtools changes were things that made sense for CSS basics. But I can put them into another PR.

I will try to go into less detail. But keep in mind that the second part will have much less detail.

[ghost]

Ok. The devtools changes were things that made sense for CSS basics. But I can put them into another PR.

I can just commit it w/o a PR if you don’t mind.

second part

Regarding the 2nd part… I think it’s enough to just tell people not to look at the code before they try to write it themselves.

[code3z]

I can just commit it w/o a PR if you don’t mind.

Actually I have some other changes in mind, I will probably make a PR.

Regarding the 2nd part… I think it’s enough to just tell people not to look at the code before they try to write it themselves.

You mean use one markdown file? I think docsify supports hidden text, so that could work.

[ghost]

You mean use one markdown file? I think docsify supports hidden text, so that could work.

No, no hidden text. Plain MD as usual. Just tell the readers to first try it themselves.

[code3z]

I can just commit it w/o a PR if you don’t mind.

Actually, I think this would be best

[ghost]

I can just commit it w/o a PR if you don’t mind.

Actually, I think this would be best

Done (0320b5864c019a2d487627c19a3991274274739d). I didn’t include the other tip, because it is almost unrelated, works only on some platforms (& cannot be migrated like ctrl → cmd) and people should know how to use their tools.