Since the last couple of things I’d like to see in CSS got thoroughly shot down I figured I’d throw out another. One thing that bothers me to no end is that % is always a percentage of the width, even if you are dealing with the height. It would be nice to be able to specify by placing h for height to the right of the %
padding-top: 20%h;
%w would be permitted for clarity, but merely an alias to % by itself. Thoughts?
I dunno about the syntax you propose but yes it generally is a pain in the bum. I think some cool things like float:bottom could be achieved if this syntax were to arise.
I’m not sure I’d use this all that much but I like the idea. For those of us who have been in the situation where this would be useful, I’ll say that I wish it was available.
As I said though, the syntax looks a bit odd. No counter-proposal for syntax though so carry on 
.
It’s essentially already here - a bit buggy, but here. It’s vw, vh, vmin and vmax. While the linked article talks about typography, it works on all elements (I recently used it on a background image to give me a responsive sizing logo)
vw = % of the viewport width
vh = % of the viewport height
vmin = % of whatever is smaller between the viewport height and the viewport width
vmax = % of whatever is larger between the viewport height and the viewport width.
Granted it’s limited because it’s based on the viewport and not the container it’s in, but it is there. You just have to think a different way.
Eh yeah that’s good but it doesn’t really cover all areas. There are a lot of instances where the containing height would be needed.
As Ryan points out, that’s not really what I’m asking for. Percentages are far more likely to be accorded to the current element, or parent (depending on context) than the viewport. What you suggest is so useless that well planned em unit use would be far more effective.
As for other syntaxes, pw and ph are available.
Another one I’ve mused with would be “parent of”
E ^ A
matches any element that contains an immediate A element. For example
div ^ span
Matches
<div><span></span></div>
It would not match
<div><p><span></span></p></div>
Since if it had to search all the way down the tree it could get rather ridiculous. In this example any applied rule would be on the div element.
Also to allow order of operations. Whatever is in them is handled first. With the above selector this allows for something like this
[div ^ input:focus] label
Another way this could be done is a :with psudeo selector similar to the current :not selector
div:with(input:focus) label
Thoughts?
Ok but that rule still would apply styling to the span, in which case why not use :has?
Ah, there you go. See, just basic musing. I haven’t studied CSS 4 selectors yet, it will be 5 years before enough browsers support them to make them feasible.
Understandable. It’s technically been removed off of the official version of the draft, but those things change so often.
I actually did read through the ENTIRE CSS3/4 specification and highlighted the coolest features I found. If you are curious about some of the cool things coming up (some already sorta here like flexbox) then read this.
http://www.codefundamentals.com/blog/future-css-features.php
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.