6 ms·

here's my pet peeves: 1. CSS should not have adopted a hyphenated naming scheme for properties, since it makes it difficult to access css properties from javas

here's my pet peeves: 1. CSS should not have adopted a hyphenated naming scheme for properties, since it makes it difficult to access css properties from javascript or other languages. 2. CSS should never have been used for layout, and nobody should have suggested it should be. CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements, which requires really icky hacks and implied relationships in a language like CSS, e.g. the definition of percentage units (percentage of what?) being mostly arbitrary and context sensitive, So you are forced to learn what all those context rules are to get the desired outcome. What does height: 80% mean? 80% of the parent element's width? 80% of the parent element's height? 80% of the window width? who knows? 3. The naming of properties and values is entirely inconsistent. Sometimes "none" works. sometimes it doesn't. What even is going on with "white-space"? 4. Who allowed Microsoft to add "pointer-events" properties to css? This is a tragedy. 5. em based font sizing seems like a really good idea until you use it in some system that will arbitrarily nest component elements until the innermost reply to a comments thread is either microscopic or 3 characters per line.

leeoniya 8y ago
pointer-events: none; is actually pretty useful in many cases when you temporarily need to disable interactions, like drag/drop
- ZenPsycho 8y ago
  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 isn't it an html attribute instead?
  - fouc 8y ago
    Would be nice to have that polyfill at the webpack build level instead of the browser. Generate css files specifically for older browsers.
  - leeoniya 8y ago
    > It's useful as long as every browser supports it. sure, but the same can be said of every web api and other open standard with multiple implementations. https://caniuse.com/#feat=pointer-events https://caniuse.com/#feat=pointer-events > But then, this is behavior. there's not always a clean separation. what about opacity:0 and visibility: hidden? this affects intractability despite being presentation, right?
  - GlitchMr 8y ago
    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 this browser, the layout doesn't really exist. Disabling forms isn't as necessary, as Opera Mini waits for a script to finish once you press something.
    - ZenPsycho 8y ago
      i did not get the memo that safari and chrome supports them now
uryga 8y ago
> 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/ https://github.com/gss/
- rimliu 8y ago
  I do. It's CSS. There is a nifty feature display: grid. And also display: flex.
  - ZenPsycho 8y ago
    This is not what I mean. Flex and Grid are simply defining layout in terms properties on an individual element, and what it expects its children to do. Still no way to represent relationships between elements (except the implied relationship between siblings, only indirectly accessible by setting properties on their parent, or setting properties on a child that affect the implicit relationship between it and its parent and or siblings, such as, eg, "margin") These things at least make certain things that were simply impossible to do before now possible, but they're doing it in a bolted on, unnatural, overcomplicated way. And still there are things that are only possible by rearranging the HTML to accomodate the implied relationships these layout systems expect.
- avip 8y ago
  I’m still missing xaml every time I need to position something on a webpage.
- int_19h 8y ago
  Take a look at WPF and its descendants (like the UWP XAML). https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/layout https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc... https://docs.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml https://docs.microsoft.com/en-us/windows/uwp/design/layout/l...
- thexa4 8y ago
fouc 8y ago
1. hyphenated for css, camelCase for javascript, underscores for API (i.e. php or ruby). Makes it easy to differentiate what's what.
- TheDong 8y ago
  If that's a serious problem for you, setup your vim to use a different color for variables based on the current filetype.
  - ZenPsycho 8y ago
    It’s not a serious problem to work around, but it is another instance where the web architects designed all these different languages without thinking all that deeply about how they would work together. and so i need .style[“background-color”] .style.width=mywidth+”px” and (sigh) href=“/search?q=hello%20world&another=query%20parameter” the latter of which is, while it's the correct way to write html, is so stupid that most browsers silently error correct the less insane (but technically wrong) version href=“/search?q=hello world&another=query parameter”
    - orf 8y ago
      Can you explain why it's technically wrong?
      - jacurtis 8y ago
        Tl;dr: Because you can not have spaces in a URL. [RFC #2396](https://tools.ietf.org/html/rfc2396 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 without breaking the URI. The percentage sign (%) followed by the two hexadecimal digits representing the octet code correspond to ASCII symbols. This is the official way to pass a non-allowed symbol into a URI string. Now let's say you want to add a space to your URI for some reason (this really shouldn't be necessary, but let's run with it). Since a space is not allowed in the URI, we instead would _represent_ a space with "%20" which is the escaped octet that corresponds with a space. Browsers and server side languages would then translate this effectively to a space character. Old browsers would break if you attempted to add spaces or other non-allowed symbols to a URL in the address bar. This required you to manually encode these symbols yourself, such as in his first example where he writes: href=“/search?q=hello%20world&another=query%20parameter” These queries would get passed to the server as `q: "hello world"` and `another: "query parameter"`. However in more modern browsers, we have attempted to make it easier for people to understand and write URLs. So browsers now correct errors made in your URI syntax for you by looking for those non-allowed characters and encoding them for you automatically before they actually submit the request. So now typing: href=“/search?q=hello world&another=query parameter” will succeed in modern browsers thanks to the fact that the browser is secretly encoding this for you. Most people, even a surprising amount of web developers, have grown up in a time when they never had to fully understand the fundamentals of URI structure and uniform standards because browsers have protected them from making mistakes. This is similar to how many new developers don't understand memory management in apps, because many tools have handled this for them in recent years.
extrapickles 8y ago
For #5 use rem which is based off the document font-size rather than the current elements font size. </pedantic> What really needs to stop is the use of pixels and absolute font sizes for sizing everything as they never work on more than 1 device/zoom level/default font size. Breaking layout into its own thing has its ups and downs. Basically you would have to break out what flexbox and grid do into a "layout" file, and come up with syntax that makes describing relationships easier than they currently are in CSS/LESS/etc. The downside to this would be that you have to chase UI bugs through 3 files rather than the current 2. What CSS could use is a good clean as its grown organically for quite some time.
- ZenPsycho 8y ago
  That's all well and good but rems only became broadly usable relatively recently, and I've had to make web pages a lot longer than that. And also fix webpages written well before that.
- RandyRanderson 8y ago
  rems don't work either because there are instances where you need to have things line up exactly. For example, if you have 3 columns. You will be one pixel out. There are no good ways to fix this. See [0] https://johnresig.com/blog/sub-pixel-problems-in-css/ https://johnresig.com/blog/sub-pixel-problems-in-css/ CSS should only be used to appease those ppl in your org that read/write more blog posts than code. Use JS if in doubt. You're welcome.
  - dan-robertson 8y ago
    I tried and failed to recreate that example (from 2008). Modern browsers do seem to do a reasonable amount of sub pixel rendering. Maybe rems are bad but that article does not demonstrate it.
    - RandyRanderson 8y ago
      Did you try it on ie11? That was the only one we experienced it on. Of course we had to support ie, which meant a layout re-write. :<
a1369209993 8y ago
6. display:none and position:fixed need to die in a raging inferno, or at least get moved to a seperate property that can be *{be-full-of-shit:no-dammit!important;}'d away in userContent.css or equivalent. (See also pointer-events:auto!important;.) 7. Anything nontrivial involving tables/tds seems to be impossible to do properly and pointlessly obnoxious to do at all. Eg: <td> <tdtag>foo</tdtag> Put this in the center as if tdtag wasn't here. </td>
deleted 8y ago
[deleted]
bunnycorn 8y ago
I came here to post what you already did on (2) Couldn't agree more. The problem is that we are stuck with it, looks like web technologies are set in stone. Here's how it should have been: https://constraints.cs.washington.edu/web/ccss-uwtr.pdf https://constraints.cs.washington.edu/web/ccss-uwtr.pdf

leeoniya 8y ago

pointer-events: none; is actually pretty useful in many cases when you temporarily need to disable interactions, like drag/drop

ZenPsycho 8y ago
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 isn't it an html attribute instead?
- fouc 8y ago
  Would be nice to have that polyfill at the webpack build level instead of the browser. Generate css files specifically for older browsers.
- leeoniya 8y ago
  > It's useful as long as every browser supports it. sure, but the same can be said of every web api and other open standard with multiple implementations. https://caniuse.com/#feat=pointer-events https://caniuse.com/#feat=pointer-events > But then, this is behavior. there's not always a clean separation. what about opacity:0 and visibility: hidden? this affects intractability despite being presentation, right?
- GlitchMr 8y ago
  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 this browser, the layout doesn't really exist. Disabling forms isn't as necessary, as Opera Mini waits for a script to finish once you press something.
  - ZenPsycho 8y ago
    i did not get the memo that safari and chrome supports them now

uryga 8y ago

> 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/ https://github.com/gss/

rimliu 8y ago
I do. It's CSS. There is a nifty feature display: grid. And also display: flex.
- ZenPsycho 8y ago
  This is not what I mean. Flex and Grid are simply defining layout in terms properties on an individual element, and what it expects its children to do. Still no way to represent relationships between elements (except the implied relationship between siblings, only indirectly accessible by setting properties on their parent, or setting properties on a child that affect the implicit relationship between it and its parent and or siblings, such as, eg, "margin") These things at least make certain things that were simply impossible to do before now possible, but they're doing it in a bolted on, unnatural, overcomplicated way. And still there are things that are only possible by rearranging the HTML to accomodate the implied relationships these layout systems expect.
avip 8y ago
I’m still missing xaml every time I need to position something on a webpage.
int_19h 8y ago
Take a look at WPF and its descendants (like the UWP XAML). https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/layout https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc... https://docs.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml https://docs.microsoft.com/en-us/windows/uwp/design/layout/l...
thexa4 8y ago

fouc 8y ago

1. hyphenated for css, camelCase for javascript, underscores for API (i.e. php or ruby). Makes it easy to differentiate what's what.

TheDong 8y ago
If that's a serious problem for you, setup your vim to use a different color for variables based on the current filetype.
- ZenPsycho 8y ago
  It’s not a serious problem to work around, but it is another instance where the web architects designed all these different languages without thinking all that deeply about how they would work together. and so i need .style[“background-color”] .style.width=mywidth+”px” and (sigh) href=“/search?q=hello%20world&another=query%20parameter” the latter of which is, while it's the correct way to write html, is so stupid that most browsers silently error correct the less insane (but technically wrong) version href=“/search?q=hello world&another=query parameter”
  - orf 8y ago
    Can you explain why it's technically wrong?
    - jacurtis 8y ago
      Tl;dr: Because you can not have spaces in a URL. [RFC #2396](https://tools.ietf.org/html/rfc2396 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 without breaking the URI. The percentage sign (%) followed by the two hexadecimal digits representing the octet code correspond to ASCII symbols. This is the official way to pass a non-allowed symbol into a URI string. Now let's say you want to add a space to your URI for some reason (this really shouldn't be necessary, but let's run with it). Since a space is not allowed in the URI, we instead would _represent_ a space with "%20" which is the escaped octet that corresponds with a space. Browsers and server side languages would then translate this effectively to a space character. Old browsers would break if you attempted to add spaces or other non-allowed symbols to a URL in the address bar. This required you to manually encode these symbols yourself, such as in his first example where he writes: href=“/search?q=hello%20world&another=query%20parameter” These queries would get passed to the server as `q: "hello world"` and `another: "query parameter"`. However in more modern browsers, we have attempted to make it easier for people to understand and write URLs. So browsers now correct errors made in your URI syntax for you by looking for those non-allowed characters and encoding them for you automatically before they actually submit the request. So now typing: href=“/search?q=hello world&another=query parameter” will succeed in modern browsers thanks to the fact that the browser is secretly encoding this for you. Most people, even a surprising amount of web developers, have grown up in a time when they never had to fully understand the fundamentals of URI structure and uniform standards because browsers have protected them from making mistakes. This is similar to how many new developers don't understand memory management in apps, because many tools have handled this for them in recent years.

extrapickles 8y ago

For #5 use rem which is based off the document font-size rather than the current elements font size. </pedantic> What really needs to stop is the use of pixels and absolute font sizes for sizing everything as they never work on more than 1 device/zoom level/default font size. Breaking layout into its own thing has its ups and downs. Basically you would have to break out what flexbox and grid do into a "layout" file, and come up with syntax that makes describing relationships easier than they currently are in CSS/LESS/etc. The downside to this would be that you have to chase UI bugs through 3 files rather than the current 2. What CSS could use is a good clean as its grown organically for quite some time.

ZenPsycho 8y ago
That's all well and good but rems only became broadly usable relatively recently, and I've had to make web pages a lot longer than that. And also fix webpages written well before that.
RandyRanderson 8y ago
rems don't work either because there are instances where you need to have things line up exactly. For example, if you have 3 columns. You will be one pixel out. There are no good ways to fix this. See [0] https://johnresig.com/blog/sub-pixel-problems-in-css/ https://johnresig.com/blog/sub-pixel-problems-in-css/ CSS should only be used to appease those ppl in your org that read/write more blog posts than code. Use JS if in doubt. You're welcome.
- dan-robertson 8y ago
  I tried and failed to recreate that example (from 2008). Modern browsers do seem to do a reasonable amount of sub pixel rendering. Maybe rems are bad but that article does not demonstrate it.
  - RandyRanderson 8y ago
    Did you try it on ie11? That was the only one we experienced it on. Of course we had to support ie, which meant a layout re-write. :<

a1369209993 8y ago

6. display:none and position:fixed need to die in a raging inferno, or at least get moved to a seperate property that can be *{be-full-of-shit:no-dammit!important;}'d away in userContent.css or equivalent. (See also pointer-events:auto!important;.) 7. Anything nontrivial involving tables/tds seems to be impossible to do properly and pointlessly obnoxious to do at all. Eg: <td> <tdtag>foo</tdtag> Put this in the center as if tdtag wasn't here. </td>

deleted 8y ago

[deleted]

bunnycorn 8y ago

I came here to post what you already did on (2) Couldn't agree more. The problem is that we are stuck with it, looks like web technologies are set in stone. Here's how it should have been: https://constraints.cs.washington.edu/web/ccss-uwtr.pdf https://constraints.cs.washington.edu/web/ccss-uwtr.pdf