FLUID-4975: Remove browser-specific CSS, replace with css support checker (like modernizr)

Metadata

Source
FLUID-4975
Type
Task
Priority
Major
Status
Open
Resolution
N/A
Assignee
N/A
Reporter
heidi valles
Created
2013-04-11T14:49:14.908-0400
Updated
2022-02-03T10:23:16.483-0500
Versions
N/A
Fixed Versions
  1. 5.0
Component
  1. Prefs Framework
  2. UI Options

Description

Remove the css/ie8.css file from UI Options and replace with graceful degradation css, via a css support checker like modernizr.

Implemented here: https://github.com/heidiv/infusion/tree/FLUID-4970-modernizr

But issue with false-positive in IE8 for generatedcontent, seems to be because it's within an iframe that is initially hidden (has height of 0). Might be an issue with modernizr's check for this.

Comments

  • Justin Obara commented 2016-08-12T12:02:26.961-0400

    Need to review if modernizr is still the best approach.

  • Ned Zimmerman commented 2021-03-24T09:00:55.829-0400

    I think lots has changed since this JIRA was filed 🙂

    But one good thing to explore would be the supports media query. Here's an example for CSS grid.

    div.columns > * {
  background: red;
  float: left;
  height: 100px;
  width: 100px;
}

div.columns > * + * {
  margin-left: 1em;
}

@supports(display: grid) {
  div.columns {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(4, 100px);
  }
  
  div.columns > * {
    margin: 0;
    width: 100%;
  }
  
  div.columns > * + * {
    margin-left: 0;
  }
}

    The CSS inside the supports query will only be run with browsers which support display: grid.

    Feature queries themselves are supported in all modern browsers (not in IE).