5

CSS3 Proposal: Shade (-/+)

almost 10 years ago from

I find myself digging through sites like 0to255.com or colllor.com to look for color palettes primarily to find the next color in that specific shade. Although I've recently published my personal palette to never have to go through that again I still find it extremely annoying to go one shade lighter, or darker.

I've seen a few individuals propose ideas for CSS3 and although I am really not sure how to go on about that I think I have something that might be useful to many of us.

CSS Example:

.link a{ color:#121212; }

.link a:hover{ shade:-1; }

Concept: Lighter: -1 through -5 Darker: +1 through +5

Darker based on #121212

0 = #121212 +1 = #0a0a0a +2 = #020202 +3 = #000 +4 = #000 +5 = #000

Lighter:

0 = #121212 -1 = #1b1b1b -2 = #232323 -3 = #2c2c2c -4 = #343434 -5 = #3d3d3d

How do I go on about proposing this one? Does anyone have the experience, do you think there's value in this?

21 comments

  • Jake Lazaroff, almost 10 years ago

    The is a silly proposal; why bother trying to include something in the official CSS spec (thereby making it more complex to implement, possibly introducing bugs, taking time away from actually worthwhile features) when it can—and has—been implemented in CSS extensions such as SASS/LESS/Stylus?

    I really don't see why you're so reluctant to use one of those, they're not difficult to learn and you can compile them ahead of time so you're only serving clients CSS.

    1 point
  • Manik RatheeManik Rathee, almost 10 years ago

    You don't need to run anything client-side for less or sass - install the gems to compile in CLI or use something like Codekit.

    This functionality exists - if you want to use it, you need to use one of those tools.

    1 point
  • Maxwell Barvian, almost 10 years ago

    Most CSS preprocessors ship with this functionality, usually in the form of lighten() and darken() functions that take a color and percentage as input.

    1 point
  • Jeff EscalanteJeff Escalante, almost 10 years ago

    yup, sass and stylus both support lighten(red, 10%) - stylus in particular can pull the color of the parent element, so you could runlighten(@color, 10%)` and achieve what you are after right now with no need to wait 10 years even if this was adopted until it had browser support.

    1 point
    • Daniel HaimDaniel Haim, almost 10 years ago

      Nothing I write utilizes Ruby, so SASS is completely out of the question at this point. And LESS is laughable. The world "less" almost means to me that it's a "compressed" version of my CSS. But I have to install an entire JS library to use it. Making it completely useless.

      I don't want to include useless JS, I want to write smarter.

      1 point
      • Kelly SuttonKelly Sutton, almost 10 years ago

        You can make a project SASS-capable without having the shipped product dependent upon Ruby. Just have to build the pipeline correctly.

        Also check out Jeff E.'s new roots framework/toolbox. Good for getting a feel for things (http://roots.cx/). The future is definitely in moving this stuff browser-side though. Maybe CSS4?

        2 points
      • Jeff EscalanteJeff Escalante, almost 10 years ago

        Gotta agree with everyone else on the responses here. If you are not moving towards compiling your css, you are just missing out on a much faster and more powerful workflow. It's not difficult to install them, and you don't need to have a server-side project to use either.

        You could say the same thing about assembly language - "Why install a bunch of extra libraries in order to get ruby, I just want to write better ASM". Sure, you go do that while I crank out code 10x faster than you can with the same or a greater level of reliability.

        Also, I never mentioned LESS, so I assume you meant stylus here. But I feel like the argument "I have to install a js library to use it, therefore it is useless" is a pretty weak argument.

        Like Kelly mentioned below, I'm working on a project called roots (http://roots.cx) that takes a lot of the pain out of installing and configuring these preprocessors. It compiles everything for you, so your public files are just as clean as if you wrote them by hand, and it doesn't slow down performance at all. Give it a shot - always try things before bashing them.

        0 points
  • Cihad TurhanCihad Turhan, almost 10 years ago (edited almost 10 years ago )

    I think you can't do such a thing (without using js) but I believe some compilers has this kind of features. Take a look at LESS and SASS. You can assign some variables and maybe you can do such tricks

    http://wearekiss.com/simplesshttp://sass-lang.com/

    1 point
    • Daniel HaimDaniel Haim, almost 10 years ago (edited almost 10 years ago )

      CSS3 utilizes built-in browser code ("javascript") note that this is in quotation, in other words a -webkit thing might work because it's programmed in C, or whatnot, which is why it runs faster.

      SASS, unless it's server side is a waste of time, not to mention a horrible habit while LESS is probably the worst - it's not LESS if you have to implement bunch of scripts to use it - and again, that's a bad habit of writing.

      0 points
      • Andrew LiebchenAndrew Liebchen, almost 10 years ago

        This may be ignorance on my part, but I assumed that SASS was ALWAYS server side...SASS is complied into CSS which is passed to a browser.

        0 points
        • Jake Lazaroff, almost 10 years ago

          There are JavaScript libraries which will do this on the client; regardless, I'd imagine that anyone who uses these for anything serious compiles it before publishing.

          0 points
      • Jason BlockJason Block, almost 10 years ago

        TLDR: Use SASS. It solves your problem.

        SASS is not a bad habit. It encourages DRY principles. It encourages modularization. Like anything, it can be written badly, but if done correctly it can drastically speed up development time and can make it much easier to make big, sweeping changes.

        Also, the amount of time needed to render a change in color is negligible. We've made computers really good at doing this. GPU acceleration is great for complex redraws, like translating a block-level element on the page or applying some sort of blur-like effect (box or text shadow, or just a CSS filter). In fact, not specifying the color will add extra clock cycles when it comes to parsing. If the rule has the color, it doesn't have to perform the conversion. But if you just say "darken," it has to make a function call. Even in C that's more work (microscopic work, but work nonetheless).

        You should really take a look at what's truly causing UI to lag or render slowly. It's mostly due to redraws, JS, overuse of non-GPU accelerated behaviors, and improperly written network requests.

        It takes 20 minutes to set up an environment to pre-compile SASS stylesheets into CSS. You can even use SCSS, which is syntactically identical to CSS, only with some augmentations to give you all the power of SASS.

        There's a reason why CSS doesn't have features like this: it's not what CSS is for. Precompilers give you the ability to code using styles you're familiar with in OOP-land, but it's specifically designed to output plain CSS--a list of styles that gets matched to elements in the DOM tree based on selectors and attributes. It's designed to be as close-to-the-metal as possible, since it often traverses a very, very large tree and puts a lot of graphical touches onto it. Function calls create a reason for the tree to not parse as fast as it should.

        But most of all, CSS isn't a programming language. That's the most important part. It's a stylesheet. It's a collection of attributes. It's important for it to retain that principle so it can stay pure and simple.

        2 points
  • abe garciaabe garcia, almost 10 years ago

    SASS is your answer. So many options. http://robots.thoughtbot.com/post/12974565313/controlling-color-with-sass-color-functions

    0 points
  • Jake ZienJake Zien, almost 10 years ago

    I feel like this is really just a special case of variables — basically an enum. If CSS just included global variables, your "shades" case would be solved.

    0 points