Jacord Posts - Answer Overflow

Jacord

Posts Comments

KPCKevin Powell - Community

•Created by Jacord on 3/19/2024 in #ui-ux

Fixing typeface artefacts

1 replies

KPCKevin Powell - Community

•Created by Jacord on 3/1/2024 in #front-end

Fallbacks for svh units on older iOS devices?

Hi there I'm testing my CSS on older iOS devices as our site gets most of our visitors from iPhones and I'm running into an issue where they seem to think they can use svh but the result is always zero, and so any CSS rules using them won't fall back to any other rule, they'll just give the wrong value. First I tried...

  .region-header{
    min-height: 100vh;
    min-height: 100svh;
}

  .region-header{
    min-height: 100vh;
    min-height: 100svh;
}

And it failed to fall back. Then I tried...

  .region-header{
    --_svh: 1vh;

    @supports (min-height: 100svh) {
      --_svh: 1svh;
      border: 1px solid red;
    }
    
    min-height: calc(100 * var(--_svh));
}

  .region-header{
    --_svh: 1vh;

    @supports (min-height: 100svh) {
      --_svh: 1svh;
      border: 1px solid red;
    }
    
    min-height: calc(100 * var(--_svh));
}

That also failed, as the device passed the @supports query and produced a red border despite no success Likewise this failed

.region-header{
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .region-header{
    min-height: 100svh;
    border: 1px solid green;
  }  
}

.region-header{
  min-height: 100vh;
}

@supports (min-height: 100svh) {
  .region-header{
    min-height: 100svh;
    border: 1px solid green;
  }  
}

Again the green border showed, but the rule failed, and didn't fallback. Any ideas?

19 replies

KPCKevin Powell - Community

•Created by Jacord on 2/11/2024 in #front-end

mid-sentence header!

3 replies

KPCKevin Powell - Community

•Created by Jacord on 1/18/2024 in #front-end

Is a CSS pseudo-element an acceptable replacement for missing whitespace?

Hello, I have a glossary plugin I am using in Drupal which litters my content with extra whitespace elements (not characters) which messes up content formatting. I have successfully removed these whitespace elements from the DOM using javascript which targets any paragraph where the glossary plugin has caused problems. The new problem comes when two glossary terms appear next to each-other and my script removes the whitespace between them. They are still separate elements in the DOM which are read out by screen readers as separate words, but they look like one long word... I can fix this visually with something like

.definition+abbr::before{
  content:" ";
}

.definition+abbr::before{
  content:" ";
}

...however it really does feel like a hack. I also can't get rid of the text decoration on the ::before element, although that's minor, compared to accessibility concerns. I'm of course going to try and fix my javascript, but in the meantime would this workaround/hack be ok?

2 replies

KPCKevin Powell - Community

•Created by Jacord on 1/16/2024 in #front-end

overflowing text in grid area