search

localgovdrupal / localgov

Installation profile for the LocalGov Drupal distribution.
GNU General Public License v2.0
81 stars 18 forks source link

IE11 compliance - possible interpretations #193

Closed finnlewis closed 2 years ago

finnlewis commented 3 years ago

Coming from discussions about future theme architecture, one of the hopes is ti use CSS variables, whith IE11 does not support.

On suggestion reads as follows (from https://docs.google.com/document/d/1b3M3XnRYXlzqLdq05s4hE3AlzoNQP-89OKXXx3FleEQ/edit#)

In an effort to try to use modern CSS and in anticipation of dropping support for IE11 when Drupal does so (if not sooner - even Microsoft will no longer support it from August 17th this year), I would like to propose that we provide fallbacks for IE11 but not make them custom per site. Instead, each site will have the same look and feel in IE11, but be perfectly branded in all modern browsers.

This will allow us to use CSS Custom Properties (i.e. native CSS variables) which lends itself to easy scalability for a frontend. We can easily remove IE11 code once we drop support for it. An example of how a CSS class might look with this approach:

:root { --font-heading-large-smallest: 1.5rem; --font-heading-large-ideal: 1.5vw; --font-heading-large-largest: 4rem; }

h1 { font-size: 3rem; font-size: clamp(var(--font-heading-large-smallest), var(--font-heading-large-ideal), var(--font-heading-large-largest)); }

This will mean that on IE11 the h1 will always be 3rem, but on all other browsers it will scale. The smallest it will ever be is 1.5rem (on mobile), it will usually be 1.5vw, and the largest it will ever be is 4rem (on a large desktop). Further to this then, any of those variables can be easily overridden on a per theme basis, but simply having a variables.css file.

This approach allows for very efficient CSS for scalable fonts without the performance/maintenance overhead of media queries, etc.

finnlewis commented 3 years ago

Some questions:

  1. How many users are actually using IE11 for council websites?
  2. What are the accessibility and usibility considerations? Might this confuse people who are switching between browsers and devices?
finnlewis commented 3 years ago

@cjstevens78 @Adnan-cds @andybroomfield @willguv @danchamp @ReeceMarsland @ekes @lbcwebmaster any thoughts on this?

cjstevens78 commented 3 years ago

@finnlewis At Croydon the main issue with IE11 is that most of the internal users of the site are on council laptops with IE11 installed so having a different layout when trying to get look and feel changes signed off could be problematic if its not identical. I'm not sure what the plan is with regards to updating to edge or something - if there is indeed a plan at all. Presumably other councils will be in the same boat. I don't see a problem with the proposed approach. With regards to potential confusion over display - my 2p worth would be that people in general tend to be tethered to the one browser or use a preferred one. Also things like font size changes aren't that noticeable anyway - especially when talking responsive classes because I doubt there's many people out there looking at IE11 on their mobile.

andybroomfield commented 3 years ago

If javascript can be expected then you can use this polyfill. https://jhildenbiddle.github.io/css-vars-ponyfill/#/

It has some cavets. From my use it basically means varaibles are like SASS vars and are constants, so the cascading and javascript changing behaviour is not supported.

FWIW BHCC has begun a rollout of Chrome based Edge to better support external sites on council machines. Not sure if the council website would count as external though. I will verify our browser support requirements and report back in the other thread.