Grow your CSS skills. Land your dream job.

2013 CSS Wishlist

Published by Chris Coyier

I'm pretty happy with CSS. I know it's common to complain about CSS and how it was never meant to build web pages like we do now and it's ill-suited to many tasks and yadda yadda. But I dunno. I work with it every single day and I feel like it's getting the job done pretty well. Maybe I don't have those fancy big thinker thoughts that can foresee alternate universes where more perfect languages exist. Or something.

As Hakim says:

So what does 2013 hold for CSS? Tab Atkins works directly on the CSS specs and has outlined his own plan for the year. It all sounds like good stuff to me. In particular I like the focus on flexbox and grid. Those will give very powerful layout tools that will serve us as long as the web is 2D. And the focus on native @extend which would be amazing.

Honestly, I trust Tab's own instincts on how CSS needs to be evolved more than my own since he's so involved in it and has a mind for systems. You can't just jam in everything any ol' author tells you they want or you'll end up with a mess. Now, that being said, as an author, here's some things I'd like them to jam in there.

1. I'd like to be able to select an element based on if it contains another particular selector

For instance, select a blockquote if it contains a paragraph.

blockquote::contains("p") {
  /* Not like this, since it's not a pseudo element, but something like it */
}

I feel like this comes up all the time and it seems weird it's not possible. This is in the same vein as the parent selector that I also still want and is a whole can of worms.

2. I'd like to be able to select an element based on the content it contains

Content, meaning literally text content whether it's in another element or not. Like:

h1::match-string("coyier") {
  /* Not this again, since it's not a pseudo element, but something like it */
}

I feel like I should be able to target elements if they contain my name if I want to. Or imagine a site like Twitter. You should be able to style a tweet that contains a certain word a certain way if you want. Or search results.

3. I'd like multiple pseudo elements

As in:

.speech-bubble::before(2) {
  /* Or ::before::before or something, smart people can decide */
}

As we've discussed here, it's a good idea. Web components / Shadow DOM is cool but it's too complex for something as simple as just needing one extra meaningless element to tack on and complete some visual design tidbit.

4. I'd like to be able to animate/transition something to height: auto;

As in:

.flash-message {
  height: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.flash-message.loaded {
  height: auto;  /* nope */
  opacity: 1;    /* yep */
}

The browser would be able to know the height of an element if it had height: auto; (instead of whatever it currently has) on it, right? So figure it out and animate to that value.

5. I'd like a good bit of the stuff from Sass

In order of how awesome it would be:

  1. @extend - i.e. this selector inherits the stuff from this selector
  2. @mixin / @include - i.e. reusable/alterable chunks
  3. nesting - i.e. .module { background: black; h2 { color: white; } }

I would draw the line at things like loops that take CSS too far into programming and instant readability. I'm not even huge on variables being native, although I think it's too late on that one. The color functions would be sweet if they could be done in a simple, obvious, readable way.

6. I'd like ::nth-letter, ::nth-word, etc

::nth-everything, really. Letters, words, lines, and with all their cousin selectors. For fancy stuff like this:

article.poem p:first-child::nth-line(-n+2) {
  font-variant-caps: small-caps;
  color: red;
}

I understand the biggest blocker here is languages. For instance in some languages one character represents and entire word and that fuzzies these concepts. It seems to me like things that could be overcame though.

The greatest of all wishes...

Would be that all major browsers, mobile included, built in fancy auto updating that upgrades the browser without any user intervention at all. Like Google Chrome desktop. Five years from now it would be sweet if we didn't even talk about browser versions at all anymore. We referred to them just by name, because obviously everyone using them is on the latest version.

Comments

  1. Eric Jablow
    Permalink to comment#

    I agree. I know some people who would love:

    p::starts-with("(U") {
        background-color: light green;
    }
    
  2. Permalink to comment#

    My biggest wish would be foreground support which would function just like background but it would place it above the content of the element instead of below it.

    Also I would love for pointer-events:none to work across all browsers. :)

  3. Ooooh ooooh. Another one.

    If you apply box-shadow to an img it should render it on top of the image. It’s totally useless underneath where it renders now.

  4. I definitely agree with the last wish, and if that wouldn’t work can we create an update for IE 6 and 7 that just makes the computer using it explode? or at least recycle itself into something useful…

  5. Kenny
    Permalink to comment#

    +1 for element::match-string

  6. I’ve been waiting for CSS to be more focused on multi-touch interaction.
    Something like:


    .menu-item:double-tap
    .gallery:swipe
    .map:pinch

    etc. I mean, the iPhone has been around since 2007. Time for CSS to catch up.
    We should be designing for touch-first interaction anyway.

    • Permalink to comment#

      There “kinda” is something like this already for IE10. It’s called touch-action (prefixed -ms- for now):

      pinch-zoom
      double-tap-zoom

      Although this isn’t fully what you requested, it can help you in some cases.

    • Nile
      Permalink to comment#

      I don’t know… Those sound pretty event oriented. More of a JavaScript thing, wouldn’t you think?

    • Keith
      Permalink to comment#

      I agree with Nile. The closest CSS gets to this is with the state of some elements (checked, visited, hover) and that’s the closest it should ever get. Leave events to JavaScript.

  7. Permalink to comment#

    I want border-bevel: 5px; to make straight cuts in box corners, pretty silly request, but sometimes making a bevel in a box corner is just a real pain. It would be used exactly the same as border-radius: 5px 3px 5px 3px; but for straight cuts.

  8. For those first two you could just change the syntax to:

    :match-string()
    

    Single colon because its a pseudo selector, not a pseudo element. Having said that, I don’t see how the first one is different to the parent selector?

  9. Permalink to comment#

    NIce post!
    All of your CSS wishes are perfectly understandable; we would all benefit by these. Good luck though on that last one!

  10. David
    Permalink to comment#

    maybe they should just combine javascript and css and be able to include the css in the javascript sort of how you include inline assembly into c++.

    $(document).ready(function(){
    _css {
    page.background-color: black;
    page.color: green;
    }
    return false;
    });
    });

    function setBackgroundColor(elm,clr1)
    {
    _css {
    elm.background-color: black;
    elm.color: green;
    }
    return false;
    }

    and in the html something like ltr(left to right): onltrswipe=’setBackgroundColor(“home”,”white”);’

    and in the html something like rtl(right to left): onrtlswipe=’setBackgroundColor(“home”,”black”);’

    just an idea. even if it’s not a very good one.

    • Blake Petersen
      Permalink to comment#

      Actually, most of what is proposed here can be done using CSS’s best homie, jQ, pretty easily, and with plain-jane JS too, if you like inefficiency ;P

      I think the idea is to have a non-JS dependent means of creating these functions as JS can be cpu-intensive on less capable devices and also relies on post-dom changes which are not only not always picked up by bots, but has an adverse impact on user experience as they have to wait for the UI to load before interacting with the page, which could vary from browser to browser, esp IRT to performance.

      Higher ‘human user’ PLT means lower Conversion Rates which means Fewer Bonuses! ;]

    • Nile
      Permalink to comment#

      This actually seems like an awful idea… There needs to be a separation between script and style. Also, please don’t use jQuery for that.

  11. Animate pseudo elements.

  12. Permalink to comment#

    For your first wish, check out the Subject Selector in CSS Selectors Level 4:

    http://dev.w3.org/csswg/selectors4/#subject

    Basically you write your selector all the way down to the identifying child element you have, then you go back and throw the exclamation mark in to tell the browser which element in that selector chain you are actually interested in.

    Your example:

    blockquote::contains("p")
    

    becomes (assuming the exclamation mark goes just after the subject):

    blockquote ! p
    
    • Permalink to comment#

      Was going to link to the same stuff. Just reading the comments to avoid double posting. Good stuff

    • Permalink to comment#

      According to an article I read two days ago on parent selectors I was going to say that I believe there is no space between the blockquote and the ! (so that it would be blockquote! p), but the link Ron gives makes it look like it should be !blockquote p. Now I might be more confused. Oh, wait; in the spec there is a note that says:

      Should the exclamation mark be prepended or appended to the subject? Or both? Or prepend two, to avoid the “! = not” issue?”

      But I think a lot of people were expecting it to be more like: blockquote < p, but maybe there’s also problems with that approach because that approach might not make it super clear all the time exactly which element listed to the left of the p is the one to apply styles to.

    • Scott
      Permalink to comment#

      @Christian: This is different to a parent selector though. The example using < implies that p must be a direct child of blockquote. The subject selector should allow many more options including sibling selectors like h2! + p

  13. Permalink to comment#

    I’d like to be able to select an element based on if it contains another particular selector …This is in the same vein as the parent selector that I also still want

    Actually, if you had ::contains(), you’d have a parent selector automatically:

    *::contains( 'p' ){
        /* same as p::parent */
    }
    

    you’d need to have some way to specify how deep ::contains searches, though.

    .speech-bubble::before(2) {
    /* Or ::before::before or something, smart people can decide */
    }

    I remember discussing this with someone in passing (found it: it was Tab, actually), and wondering if multiple elements should be chained (i.e., a list) or mapped (i.e., a tree structure).

  14. Divs need a vertical centering attribute. This is needed now more than ever for responsive design, and the only workaround is to fool a div into behaving like a table cell.

  15. ZOMG> Here’s my wishlist I wrote up a few months ago.

    Parent Selectors (obvious)
    Parent Element Media Queries: #myElement (min-width: 40em) { /* do special stuff */ }
    A :header selector (like jQuery). Useful for styling widgets where you have no idea what the heading level is going to be.
    Regex’y input[type="email|text|password|tel|etc"] OR input[type="all"] OR input[type="~text"] selectors

  16. AngusP
    Permalink to comment#

    To be honest, I’d love simple variables – like

    $main=#FEFEFE;

    body {
    background-color: $main;
    }

    So if you had a colour theme you could change it easily without finding every instance and changing it.

    • Eric
      Permalink to comment#

      That would be pretty fantastic.

      I’ve done similar using PHP to render CSS sheets this way for a long time by using .php instead of .css in the link to the sheet.
      Though this works excellently it puts a strain on the server (I suppose, if you’re a popular site, I dunno).

      So long as the user’s computer doesn’t end up processing staggering amounts of variables it would be okay – though as a webmaster I’d rather my end took the hit for hard work rather than the user.

    • Permalink to comment#

      For the record guys, this is already in the spec

    • Eric
      Permalink to comment#

      @Remy Bach What a horrid way of declaring variables, urgh.

    • Permalink to comment#

      Tell me about it! I much prefer the way SASS does it, but as far as I’m aware, the guys were aware of the $varName syntax, but chose not to use it for some reason (I forget why exactly).

    • To be honest, I don’t see the point in CSS variables. I’d always use a preprocessor to deal with them anyway to improve performance and make it work in older browsers.

    • Permalink to comment#

      I’ve done similar using PHP to render CSS sheets this way for a long time by using .php instead of .css in the link to the sheet.
      Though this works excellently it puts a strain on the server (I suppose, if you’re a popular site, I dunno).

      @Eric – don’t do it every time, do it once and save the output as a regular css file. Do it again only when you change something.

  17. Eky Kwan
    Permalink to comment#

    Just want the background-opacity (for images), but not the hack on pseudo element we are doing now.

  18. Permalink to comment#

    I wish they add selector that allows to select the previous element of selected one. Something like: p.first + p.second, but in reverse. Maybe p.second – p.first and then style the p.first

  19. What do you guys think about a selector that allows you select an element, as long as another one exist in the whole DOM? like:

    (.mycheckbox:checked) .lightbox{ display: block; }

    Im not sure if its a good idea, but we could save a lot of javascript with this.

    • tholex
      Permalink to comment#

      For things like drop-downs, subnavigation, etc, the + selector suffices for this. But yeah that would have some interesting uses ;)

      .subnav { display: none; }
      .mycheckbox:checked + .subnav { display: block; }
      
  20. I also really want the 2/ content selector (even better if it’s inclue regexp); because it’s looks stupid for me to add some “ok” or “cancel” class everywhere I got this kind of content on my site (even more, when it’s User Generated Content)

  21. Adam
    Permalink to comment#

    width: rest;

  22. +1 on text-shadow inset.

    How about addition filters (-webkit-filter:)? Multiply, Screen, Overlay, Color Dodge, etc.

    Also, more properties for transitions!

    • Yes, that would be so cool too if they have filters just like Photoshop’s blending options (inner/outer glow, pattern overlay, stroke, etc.), but I’m sure that the browsers in the future would be strong enough to render these types of operations.

  23. Leonardo Priori
    Permalink to comment#

    ::wrapper pseudo selector

  24. My pick is not something crazy or special, but an issue I’m running into sometimes: fixing the schizophrenic nature of the display property. It’s used both for layout purposes (like inline-block) and for showing/hiding things, and those two purposes often conflict in CSS. So, maybe a new property for hiding/showing elements?

    And if I can go esoteric, I’d still love to have the responsive containers/selector queries stuff.

    • nessthehero@gmail.com
      Permalink to comment#

      Visibility has “hidden” and “visible”, which can be used to hide and show things, though I think it differs from display in that screenreaders will still read “visibility: hidden” things but will not read “display: none”, and also “visibility: hidden” maintains its layout on the page instead of collapsing.

  25. Some way of using display:inline-block without automatically getting the Whitespace from your code show up and without resorting to font-size:0.

  26. Permalink to comment#

    It is always fun to look forward into what we might be able to get with CSS. I think a good handful of these things just don’t belong in CSS as they would be process intensive and CSS (as it is) should be extremely fast.

    Getting into the looping, logic, regex, or anything that has to scan the content inside the markup. Of course these things could be worked around with more types of caching or something but. KISS

    • Permalink to comment#

      I personally really like having SASS (or any preprocessing) take care of a lot of the logic stuff, but who knows what the future holds.

  27. jared
    Permalink to comment#

    I’m really hoping for the “Is parent of” selector. Level 4 selectors seem to include this (http://www.w3.org/TR/2011/WD-selectors4-20110929/#overview) but if we could hustle on that, I’d be one happy dev.

  28. Tom Potts
    Permalink to comment#

    Hi, Chris.

    I would draw the line at things like loops that take CSS too far into programming and instant readability. I’m not even huge on variables being native, although I think it’s too late on that one.

    While I agree that I don’t want CSS to become a programming language, I think there’s a bit of misconception with regards to the CSS Variables spec. As it stands, the ‘variables’ are more like custom properties (in fact the current draft of the specification uses the terms ‘cascading variables’ and ‘custom properties’ at use and declaration, respectively). The way they are defined and used is very CSS-y, and while they can be used in place of some pre-processor variables, they can’t be used as drop-in replacements. Personally I think CSS variables (however named!) are great, but it’ll take us markup writers a little time to figure out some best practices. (I’m seeing a future CSS Tricks article called “When to use CSS Variables and when to use SASS variables”!)

    @Brad, the same applies: CSS is still going to be a markup language, and won’t need any more processing than before; in fact, if some of these enhancements get into the spec then there’ll be less processing in total, because some of the custom JavaScript out there will become unnecessary (see, for example, Tab’s point about animations, or Chris’ comments about height: auto;).

  29. Nice list. I’d like to see the capacity for more pseudo elements too.
    I feel like #2 falls in the ‘mixing content with presentation’ category though.

  30. Ely
    Permalink to comment#

    My wish is a silly one, but I’d love to have clear: self; or a float-aware-something, so we no longer need clearfix or any other hack.

    • I definitely agree with you on this one. Having to put <div class="clear"></div> in between elements gets very frustrating!

    • Marcel
      Permalink to comment#

      This would be awesome, the best solution right now is to set a class like so:

      .clear {
      content: “.”;
      clear: both;
      visibility: hidden;
      height: 0;
      width: 0;
      line-height: 0;
      }

      And simply add this class to the elements that need to be cleared, however as you said, it’s a workaround. And it doesn’t work properly in legacy (read: IE) browsers.

    • Marcel
      Permalink to comment#

      That was supposed to be .clear:after { … }, oops!

    • tholex
      Permalink to comment#

      While this is “nice”, you’d need some polyfill hack to do this the old school way regardless, as floats are already hacks for IE 7/8, and those browsers definitely won’t support any new float nice-ties.

  31. I’d like to be able to do this:

    .some-very-long-selector .something; .something-else {
    }

    instead of

    .some-very-long-selector .something, some-very-long-selector .something-else {
    
    }
  32. I believe they are address your #2 wish in CSS Level 4 with ‘match’.

    I just read about it yesterday. They used in the example being able to target all the states of links at once (regular, hover, focus, active).

  33. I wish that all browsers display websites correctly
    and that IE has stopped working for all)

  34. Permalink to comment#

    Definitely agree “content it contains” and especially with your final wish!

  35. Great ideas being shared all around. Thanks for putting them together for their possibility to chip in in future specs.

  36. Ray Andrews
    Permalink to comment#

    So many brilliant ideas here from everyone else. My wish would be for one golden moment, one special version for each browser, where at that point in time they all agreed to render all css the same way. Webkit, box-model, input rendering, all rendered the same by each browser ….

  37. Gpizarro
    Permalink to comment#

    I would love a disinherit feature on ul’s and li’s.

  38. Jeff Scott Ward
    Permalink to comment#

    Text stroke! :)

  39. Permalink to comment#

    Regarding multiple pseudo elements, the spec for “CSS3 Generated and Replaced Content Module” already defines this, but no browser supports it as far as I know:

    http://www.w3.org/TR/css3-content/#inserting0

  40. 1 is in CSS level 4!

    !blockquote p {}

    3 Adobe came up with an awesome proposal for n pseudo elements.

    4 There is some chatter around bringing Sass features like extend to CSS.

  41. nessthehero@gmail.com
    Permalink to comment#

    Chris,

    I went back and read your parent selectors post, and noticed it was from 2010, so I wondered if you saw this:

    http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

    To me, determining the subject of the selector with “$” makes it more powerful than just parent selectors.

    You could essentially have a powerful selector such as “div that contains a paragraph that has an image aligned to the left” like so:

    $div p img[align=left] { }

    Or if you wanted the p tag:

    div $p img[align=left] { }

    I kind-of like it but I’m not sure how I feel about the $ since it just looks like a variable to me.

  42. And shapes please. I know its already possible to create triangles and squares, but its unnatural and unreliable. something like this would be nice.

    div
    {
    shape:triangle;
    width:100px;
    height:100px;
    color:red;
    }

    • Ray Andrews
      Permalink to comment#

      Equilateral, right, isosceles, point on the top, point on the bottom, point on the left or right ???

  43. For #1, see the subject indicator in Selectors 4.

    For #2, would be useful, but hard to make fast. We’re going to split out a “Selectors for Batch Processors” spec for selector engines that don’t run continuously, like document.querySelector(), and some of these “too slow for regular selectors” things would be just fine over there.

    For #3, me too. We have a recent spec for it, but not much momentum from browsers.

    For #4, god dammit yes.

    For #5, it’s on my list for this year.

    For #6, that family of pseudo-elements is so hard. ;_; I know how useful they would be in some circumstances, but the fact that they make the box-tree no longer a tree (or rather, that we have to contort their definition to keep the box-tree as a tree) makes them super-annoying to deal with from the spec/implementation side.

  44. Permalink to comment#

    I think a parent selector could be quite useful.

  45. Permalink to comment#

    I know I would really love to have the height:auto animation and hell yeah for :nth-everything!

  46. Aaron D
    Permalink to comment#

    I think a media query selector for scroll-position would be very helpful. It would be useful for the paralax stuff that’s trendy now, but more practically for situations like at store.apple.com where an element (like your order subtotal and checkout link) becomes position:fixed once you’ve scrolled below where it usually sits.


    div#priceBox {
      position: absolute;
      top: 200px;
    }
    @media and min-scroll-top: 200px {
       div#priceBox {
        position: fixed;
       }
    }

    It could also be useful for block elements with overflow scrolling.

    div#contentContainer:scrollTop(>100px) { }

  47. could be overcome

  48. Michael Chang
    Permalink to comment#

    +1 for the ability to animate “height: auto;”.
    I was all yippee when I read about the focus on flexbox. I’m using flexbox (latest version) right now for an intranet web app (Google Chrome required), which is effing lovely. I feel dirty using floats anymore :) :( Floats were never meant to be used like they have been. Does anyone else write intranet web apps? I get the impression that most people would give their left earlobe to be able to, since you can dictate what browser is used and do pretty much anything you want (Dart, anyone?).

  49. theacefes
    Permalink to comment#

    Text-gradient so that I can stop telling designers to revise their mockups. :P

    • Marie Hogebrandt
      Permalink to comment#

      I agree that would be fun, but you should tell your designers to take a few classes in CSS so they know what’s possible without making you come back to tell them to revise it! =)

  50. Taufik Nurrohman
    Permalink to comment#

    I need an inset BORDER RADIUS.

  51. I have to agree with you Chris on the parent selector – that’s come up a lot for me too. It’s like the child selector but reversed.

    At the start when you say you’re happy with CSS, keep in mind that you have a lot of experience. Most people can’t weave CSS magic the way people like you can, and it’s unfortunate that you need to be a CSS genius to be able to operate it without any frustration.

  52. Permalink to comment#

    ::xpath() selector would be very usefull and bring many desired features like “::match-string”

  53. Permalink to comment#

    This is nice…

  54. Thank You Very Very Nice Coding plugin

  55. Jason Day
    Permalink to comment#

    :parent would be high on my list, as well as :parents, almost like jquery selectors.

    :parents(“p”)::contains(“span”)

    But then that’s an issue as well, where do you draw the line between CSS and what you can do with jQuery?

    • Permalink to comment#

      :parents(“p”)::contains(“span”)

      But then that’s an issue as well, where do you draw the line between CSS and what you can do with jQuery?

      There’s no confusion here. Selecting an element to style it is a CSS thing. Selecting an element to perform actions on it is a JavaScript/jQuery thing.

  56. Yes, inheritance would be awesome (or multiple inheritance) so you can inherit styles from other classes and assign a new class name. :)

  57. Permalink to comment#

    Parent selectors will come in CSS4:


    UL! LI:hover{
    background: #fff;
    }

    The CSS targets the UL in this case.

    Reference: http://www.w3.org/TR/selectors4/#subject

  58. Permalink to comment#

    I thought I should also point out that you can do all sorts of future CSS things with Hitch: http://www.hitchjs.com/

  59. cnwtx
    Permalink to comment#

    I don’t think this has ever been mentioned before, but something like shape:hexagon. Of course this could be extended to over shapes, or maybe even define your own like shape:polygon();, which of course you could fill in the co-ordinates.

    Something like this would be veeery hard with normal css right now:

    .shape {
    width:100px;
    height:1oopx;
    shape:pentagon;
    box-shadow: 1px 1px 1px #000;
    }
  60. Hassan
    Permalink to comment#

    “[...] all major browsers, mobile included, built in fancy auto updating that upgrades the browser without any user intervention at all”

    Amen!

  61. Charbs
    Permalink to comment#

    “I’d like a good bit of the stuff from Sass”…

    I hope not… Leave CSS and the pre-processors apart. I love my LESS, but i like knowing it’s a different way of coding good ol’ CSS.

  62. Chris
    Permalink to comment#

    I enjoyed reading your wish list, particularly the comments regarding browser versions.

  63. Permalink to comment#

    Actually transition to height: auto is possible through a really clever hack, check this jsfiddle out by Lea Verou:

    http://jsfiddle.net/leaverou/zwvNY/

    just animate max-height instead of height!

    • Sometimes that works, but you can’t control the timing very well then. Here’s my explanation of that on another blog talking about the max-height technique: http://www.thenerdary.net/post/20924702599/transitioning-max-height#comment-498618550

    • Patrick
      Permalink to comment#

      That sort of works, but it is still actually animating the drop down effect downwards to 999px. Which is why the effect is way quicker than 1second in that jsfiddle. If you actually measure the the height of the dropdown (200px) and use that as the max-height value then animation does take 1s. But then of course you lose the ability to have the menu longer than 200px.

      For my menus I measured the longest menu I thought could be possible, assuming no more links would be added / changed name and used that value as the max-height.

      I’d really like this to be implemented, I’m sure its just an oversight rather than planned.

  64. Permalink to comment#

    My opinion, frankly, is that everything except #5 is a nice-to-have, in light of far bigger and more useful issues to be solved. With that I mostly mean advanced layout techniques, as you already suggested in the intro. It baffles me that in 2013 it’s still so hard or so much work to reliably do non-trivial CSS layouts.

  65. peeela
    Permalink to comment#

    Re: The greatest of all wishes…

    This really only makes sense if software developers don’t invent cool new features that require twice as much device memory as the previous version. Operating systems, software, like browsers are slaves to the hardware they run on. But should they be?

  66. Bilal
    Permalink to comment#

    Great site, still supporting it and the creator.

    Just some questions:
    Why doesn’t CSS-Tricks pages have a Facebook or twitter like button?
    Also, why do i have to scroll all the way down just to write a comment?

  67. Permalink to comment#

    I think something like this would be nice too:

    .main-column {
    height: auto;
    min-height: 300px;
    }
    .seconday-column {
    height: $(".main-column").height;
    }

    I would like to be able to set some elements’ attributes depending on the values of other elements.

  68. Isn’t it already in the Level 4 Selectors to be able to reference a parent that contains a child by using ! in rhw

     .foo! #bar {
         /* Styles .foo containing #bar */
     }
    
  69. pery
    Permalink to comment#

    somethings very basic:

    .class:nth-class(2)

    and something simple to vertical and horizonale center block element without tricks.

  70. Hi Chris, what you say in point #6 sounds good; but I’m just wondering what would be more labour intensive? Applying the styling like you suggest or having one style associated with a span that can be added over and over again?

    Cheers

  71. Carl
    Permalink to comment#

    Handling Floats More Intuitively

    <div id="container">
      <p>Lorem ipsum dolor sit amet.</p>
      <img style="float:right;" src="image.gif" />
    </div>
    

    I would like collapse:normal; and collapse:none; so that floats can be handled in a more intuitive way. There are some workarounds but CSS would be better if this feature were native.

    Collapsing is when a parent element that contains any number of floated elements doesn’t expand to completely surround those elements in the same way as it would if the elements were not floated. See the A List Apart article by Noah Stokes, CSS Floats 101. The problem is that since floated elements are originally calculated in the normal flow and then removed, the parent element doesn’t consider the floated child element within its bounds and therefore acts as if it isn’t even there.

    Have a great day!

  72. Browsers. I really wish Browsers catch up on supporting the current specs of CSS3/HTML5 in a more user-friendly (developer-friendly) way. Also old browsers (atleast IE6-8) shouldn’t have such an impact on developing a website as they still have now.

  73. I would like to select an element if there’s a specific CSS rule applied to it.

    For example if the font used is ‘Arial’, I want the color of that element to be green

    p:is('font-family:Arial') { color:green; }
    
    • A CSS style selector would be entirely pointless seeing its just as easy or easier to just write both styles, and it would be a horribly slow selector since it would depend on every other style to run first.

    • Maybe you’re right but I believe there are many situation I needed something like that. I needed to style everything that is bold for example … running and inserting the rule to all the selectors that make an element bold is tedious and time consuming as your project goes larger and larger.

      That’s a wish list any way :) Everything you ever wanted you can say shamelessly :P

    • Permalink to comment#

      That’s a wish list any way :) Everything you ever wanted you can say shamelessly :P

      Exactly.

  74. Permalink to comment#

    “I’d like to be able to animate/transition something to height: auto;”

    ++ 10

  75. Matt
    Permalink to comment#

    I’d like have a pseudo-selector for portrait and landscape images like img:portrait {} img:landscape {}. So the psuedo-selector should automatically detect if the image width or height is longer or shorter and vice versa.

  76. Bhaskar
    Permalink to comment#

    I will love this one..!

  77. Nojan A.
    Permalink to comment#

    I would like to see a value for ‘width’ and ‘height’ properties that keep image in aspect ratio regarding the other property.

    Let’s say we have an image that has 300px width and 200px height:

    img {
      width: 600px;
      height: MAGIC-VALUE; /* going to be 400px */
    }
  78. Permalink to comment#

    Hah! Nice wishlist. Currently don’t think of any. CSS3 is awesome, but sometimes getting frustrated when working on a project but cannot achieve what I wanted for with simple CSS.

  79. sp3c1
    Permalink to comment#

    Got another one for you, I’ve thought about that one a lot in the last couple of weeks. I would love to have a position-anchor attribute:

    Example:

    position-anchor: 50% 0%;
    

    Would set the anchor for position absolute placement to the center top of the box model. So if you now set:

    position:absolute;
    left:50%;
    top:100%;
    

    the element would be right in the middle below the parent element, despite the actual width. That way you save the margin-left part where you don’t know the actual size of the element.

  80. Jay Cox
    Permalink to comment#

    LOL, I’m not sure about #2.

    <hypothetical_scenario>

    “Mr. Cox, you electronically signed this agreement stating you will cede all legal power and authority to us when you last signed into FaceBook and agreed to it’s EULA terms.”

    “What?! When?”

    Facebook legal document/CSS stylesheet:

    p::match-string("The User cedes all legal rights and responsibilities to Facebook, Inc.") {
         display:none;
    }
    

    </hypothetical_scenario>

    • Ryan McKay
      Permalink to comment#

      That would be along the lines of entrapment as the contract creator has clearly prevented visibility of a relevant sentence, so it’s not like the contract-signer forgot to scroll or click a “view more” link or anything (consider it as silly as a contract creator writing half a contract out with lemon juice, on the second half of a single-page contract).

    • Ryan McKay
      Permalink to comment#

      Aww dang I should’ve looked at the response preview, my “hypothetical_response” tag got stripped out :P

  81. Ryan McKay
    Permalink to comment#

    I’m really keen on the addition of multiple pseudo elements (even added my own two cents on that disscussion linked with #3).

    I guess the question comes down to whether each one would be selected via a number or some way of giving using custom names.
    This one also makes a lot of sense to add, as there appears to be many ways it can degrade gracefully for legacy browsers.

  82. Andrew
    Permalink to comment#

    I would love something like this:

    #wrapper{
    
    stuff-align: center;
    
    }
    

    That would center everything in #wrapper

  83. Awesome wishlist, 1 year later, getting closer! Few more since its 2014 now, dunno if they were mentioned in comments :) Maybe ya’ll have answers to some of these? Launch the wishes!

    1) Centering elements vertical without using display:table hackeries on their parents, non flex legacy sites, etc.

    2) Allowing CSS animations to work with “display: none;” toggle so simple menus can fade/etc.

    3) Method to put “content:’Test';” in places without psuedo selectors, for example wont work with certain buttons.

    4) Similar to other targeting thoughts you had, making the document location URL accessible with ::contains to reduce JS flicker or load hesitation to call theme layers. Currently everyone relies on JS or server side for this. Its a SaaS world, server side is getting harder to come by.

    5) Link heights and widths of objects – also abstract, but in a list the elements may be all different heights. Also currently relies on JS, yet the flex + @extend has the potential…maybe. Or maybe flex already does this and we are missing something!

    6) This one is way out there, but in the oncoming animated and 3d world, something similar to z-index must be realized. People are already mastering the 2d layer to animate simple games and stuff. Gravity, or g-index, would be that solution for future breathtaking animates. Of course x-index and y-index are still much useful too :)

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".