Earlier quoted context omitted.
It's not necessarily about pixel perfect. Even basic things like "two divs horizontally" are not intuitive in CSS, especially pre-flex-box.
Use spans then...
Incomplete List of Mistakes in the Design of CSS
141–150 of 154 posts
Re: Incomplete List of Mistakes in the Design of CSS
#142Earlier quoted context omitted.
Logic in many cases is preferable to memorization. Not only you need to memorize less upfront, you can expect new additions to follow it, and not need to memorize much to start using them. Compare how easy it is to pick up e.g. Spanish writing vs English writing vs Chinese writing, assuming that you already can speak it.
There's logic in CSS. Selector specificity, cascade, inheritance, display types, etc. Once you grasp the few parts that requires understanding you only need to remember the syntax and the declarations. Then the real challenge is to organize your stylesheets in such as way that allows your styles to grow. I've seen from experience that most people don't even try to learn the language. They come in with no knowledge of…
Re: Incomplete List of Mistakes in the Design of CSS
#143e.g.
.class { margin-bottom: -50px !important; }
would you recommend starting with CSS Grid or Flex box tutorials for learning alignment and why?
I'm getting the hang of {flex: # # #%;} grow, shrink, basis construct, but is CSS grid the future and should I cut my losses and start there? My time is limited as this is not my main profession.
Thanks in advance.
Re: Incomplete List of Mistakes in the Design of CSS
#144I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on. But what about when the transition takes effect? JS doesn't know when a style is actua…
Am I the only person who thinks this is a feature, and that the "bad part" is CSS supporting animations and transitions?
I mean - HTML for markup, CSS for layout and colors, JS for logic and animation. There was a very clear and well defined separation of concerns to the web, why did we have to go and ruin it by making CSS almost Turing complete then having everyone generate CSS and HTML with javascript?
Re: Incomplete List of Mistakes in the Design of CSS
#145Earlier quoted context omitted.
It's useful as long as every browser supports it. When it doesn't, and you want to polyfill, the polyfill needs to download all linked CSS files a second time, implement a CSS parser to find the pointer-events properties, and after all that, patch in not entirely identical behaviour with javascript. But then, this is behavior . what's it doing in a language that's supposed to be strictly about style/presentation? Why…
Out of curiosity, what browser do you need to support that doesn't support pointer-events? Internet Explorer 10? No longer supported by the vendor, other than for Windows Server 2012 which likely won't be used by your user. Opera Mini? What is your usecase? Opera Mini works very differently to other browsers. You can select the text whanever it's visible on the screen, even if it's covered by another element - as for…
Re: Incomplete List of Mistakes in the Design of CSS
#146Earlier quoted context omitted.
It is as simple as it ever was to do what could be done 15 years ago with a simple text editor and access to the internet. Any adjoining aspect has gotten easier and cheaper by a magnitude. It's just that what people want has gotten a lot harder to build.
The removal of the tag in place of CSS black magic is definitely not "easier" than it was 15 years ago. However I suspect this is going to be one of those debates that we have to agree to disagree on. I should add that I don't disagree with the deprecation of from a language purists perspective. However it was still a step backwards in terms of ease of development when centring stuff in CSS is so clunky in comparison…
Re: Incomplete List of Mistakes in the Design of CSS
#147Earlier quoted context omitted.
1. hyphenated for css, camelCase for javascript, underscores for API (i.e. php or ruby). Makes it easy to differentiate what's what.
If that's a serious problem for you, setup your vim to use a different color for variables based on the current filetype.
Re: Incomplete List of Mistakes in the Design of CSS
#148Earlier quoted context omitted.
Can you explain why it's technically wrong?
Tl;dr: Because you can not have spaces in a URL. [RFC #2396]( https://tools.ietf.org/html/rfc2396 ) defines an official standard for URIs. Spaces are not an allowed character within a URI. Since many symbols (such as a space, which is an invisible symbol) are not allowed in a URI, then a technique called "escaped octet" was introduced to allow you to pass ASCII symbols (such as a space, among many others) in the URI…
the fact that ampersand was chosen as a query term seperator for URLs, knowing that they're also a special character in html that introduce entitity encodings, seems like it was a bit shortsighted. Browsers won't complain about an unencoded ampersand in a URL, but the the html validators will.
Historically, semicolon ; is also supposed to work as a query term seperator, (in particular, for map coordinates!), and you wouldn't need to entity encode it. but this is such an obscure and historical factoid that it is not consistently implemented, and you can only use it if you know everything handling that url will definitely cope with it correctly.
fun factoid: I once broke Ruby On Rails by convincing DHH using semicolons in query strings was a good idea. Apparently some older versions of safari, and certain proxies broke down when encountering them.
Re: Incomplete List of Mistakes in the Design of CSS
#149Earlier quoted context omitted.
> CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements I couldn't agree more! Does anyone know a language/toolkit/something that gets layout right? I remember getting excited by Grid Stylesheets [1] but the project seems dead now... [1] https://github.com/gss/
The layout constraints system on iOS works pretty well once you understand that it uses a global constraint solver: https://developer.apple.com/library/archive/documentation/Us...
And then, I wonder how much could be round tripped? Do flexbox and grid fill enough of the gaps to make systems of linear constraints fully expressible in terms of flexbox/grid? If not, where are the remaining gaps, and are they useful enough "real world" usecases that you couldn't practically make constraints->css a (potentially) lossy translation. It kinda looks like GSS attempted this, but I wonder if GSS can be improved upon to rely less on JS for filling the gaps in 2018?
Re: Incomplete List of Mistakes in the Design of CSS
#150Earlier quoted context omitted.
> Try setting a child of a flexbox container to 100% height. Isn't this the default? align-items: stretch --- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ > The days of needing separate constructs because of bandwidth are over That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet.…
https://stackoverflow.com/questions/33636796/chrome-safari-n... I'm referring to this. Got bitten by it recently. > That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet. This was when each web page was a static HTML file. Few websites used programming languages to render pages. So the benefi…
The problem here is specifically having a percentage sized child of a flex item (and Chrome and Safari don't match the current spec, as the flex item is indefinite sized in too many cases; Firefox doesn't either, as the flex item is definite sized in too many cases!); to make the flex item definite sized everywhere you can typically just add height: 0.