Jacord
Jacord
PostsComments
KPCKevin Powell - Community
Created by Jacord on 3/1/2024 in #front-end
Fallbacks for svh units on older iOS devices?
Thanks, I already have a different solution from vmax/vmin. The 100% thing is interesting but in my case it caused other issues with my layout. To be honest I was very happy with how svh was working on every other device so, given that fallbacks aren't working, I think I will use media queries to target specific devices which are most likely to have the problem. Namely those iPhones which aren't able to update past iOS 15. I think most other older devices/OSs out there can run browsers which are easily updated to 2022 levels when svh was introduced. I'll have to test further whether other devices/browsers will fallback to previous declarations as expected. I am crossing my fingers that they do. Here's where I've landed anyway: 
html{
  --svh: 1vh;
  --svh: 1svh;
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
         only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3){
    --svh: 1vh;
}

.region-header{
    min-height: calc(100 * var(--svh));
}
html{
  --svh: 1vh;
  --svh: 1svh;
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
         only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3){
    --svh: 1vh;
}

.region-header{
    min-height: calc(100 * var(--svh));
}
19 replies
KPCKevin Powell - Community
Created by Jacord on 3/1/2024 in #front-end
Fallbacks for svh units on older iOS devices?
Usually I'd agree, but this is one of those "slideshow" type things... if worst comes to worst I can just stop trying to use svh at all. By the way using 100vh works absolutely fine except for the overflow on smartphones. Does the 100% method you shared work more like 100vh or 100svh in the end?
19 replies
KPCKevin Powell - Community
Created by Jacord on 3/1/2024 in #front-end
Fallbacks for svh units on older iOS devices?
(I'm going to try the 100% thing next)
19 replies
KPCKevin Powell - Community
Created by Jacord on 3/1/2024 in #front-end
Fallbacks for svh units on older iOS devices?
By failing to fallback I mean that (it seems) the declaration is not being ignored... if it were ignored min-height: 100vh would be used instead right? I would like 100vh to be used when 100svh is not supported, but can't seem to find a way to make it happen. Instead it's behaving as if any value containing svh is a valid declaration of unset/zero/initial. That, of course scuppered my next attempt which was to create a variable like this... 
--_svh: min(1vh, max(1svh, 2vh - 100svh))
--_svh: min(1vh, max(1svh, 2vh - 100svh))
... which would have worked if 1svh was being interpreted as zero. Sadly not. I even tried this, I thought I might have cracked it, but noooo: 
    --_svh: var(--made-to-fail, 1svh, 1vh); 
    min-height: calc(100 * var(--_svh));
    --_svh: var(--made-to-fail, 1svh, 1vh); 
    min-height: calc(100 * var(--_svh));
19 replies
KPCKevin Powell - Community
Created by Catz on 2/11/2024 in #front-end
Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment
Just popping in to say thanks for asking it, as this is the kind of problem I face all the time. Thank goodness for container units though.
14 replies
KPCKevin Powell - Community
Created by Jacord on 2/11/2024 in #front-end
mid-sentence header!
Thanks Mark, that's exactly how it's meant to be read... I think your suggestion is exactly how I'll do it. What do you think of this similar but different scenario where I have title and the content type or other metadata is shown above: 
<article>
  <header>
    <span>blogpost:</span>
    <h3>Title Of Blogpost</h3>
    <time>Feb 11 2023</time>
  </header>
  <main>
  Blah blah blah
  </main>
</article>
  
<article>
  <header>
    <span>blogpost:</span>
    <h3>Title Of Blogpost</h3>
    <time>Feb 11 2023</time>
  </header>
  <main>
  Blah blah blah
  </main>
</article>
I'm inclined to leave that how it is given that the parent element shows what is grouped?
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?
Here's a codepen which approximates what I'm talking about: https://codepen.io/crowjake/pen/jOJmyoe
2 replies
KPCKevin Powell - Community
Created by vince on 1/16/2024 in #front-end
max-width media query not applying to max value
That was an interesting read... much of it lines up with my existing frustrations with what has happened to reliable ole pixel.
12 replies
KPCKevin Powell - Community
Created by Jacord on 1/16/2024 in #front-end
overflowing text in grid area
For anyone coming across similar issues container-type: inline-size on .grid-of-columns, or its parent was necessary to get things working.
6 replies
KPCKevin Powell - Community
Created by Jacord on 1/16/2024 in #front-end
overflowing text in grid area
https://codepen.io/crowjake/pen/XWGMzpG When I dump the body HTML and my custom CSS into codepen the problem doesn't exist so looks like the problem is probably caused by the CMS and/or javascript/css elsewhere in the instalation. So I think you guys may not be able to help after all.
6 replies
KPCKevin Powell - Community
Created by vince on 1/16/2024 in #front-end
max-width media query not applying to max value
Me neither to be honest! I was just wondering if it might have played a part... I bet it's something simpler than that, but if it's working the way you want it to for now hopefully it can spare you some headache until the answer shows up.
12 replies
KPCKevin Powell - Community
Created by vince on 1/16/2024 in #front-end
max-width media query not applying to max value
"I don't know why it works, but it works"
12 replies
KPCKevin Powell - Community
Created by vince on 1/16/2024 in #front-end
max-width media query not applying to max value
Very strange! Is there any possibility some sort of non-integer display scaling is leading to rounding errors in the browser? What happens if you go sub-pixel? i.e. 1023.01px or 1023.99px or something in between?
12 replies
KPCKevin Powell - Community
Created by Jacord on 1/16/2024 in #front-end
overflowing text in grid area
I'm going to take that to mean there's nothing you can see wrong with the code I have posted, which is at least a starting point by process of elimination! As it happens there is only one thing in the 'desc' area, so what you're seeing in the screenshot is the span.text from previous grid items overflowing on-top of each-other. This is all within a really big project, and difficult to disentangle, so I think I'm just going to come back to it with fresh eyes later.
6 replies
KPCKevin Powell - Community
Created by Jacord on 1/11/2024 in #front-end
Aren't custom properties inherited?
No description
7 replies
KPCKevin Powell - Community
Created by Jacord on 1/11/2024 in #front-end
Aren't custom properties inherited?
OOOooooh - I just re-read your answer... this makes sense, and it sounds like the 'width' property in my example was inherited, not the '--_width' custom property but when I saw it change I was 'tricked' into thinking it had worked?
7 replies
KPCKevin Powell - Community
Created by Jacord on 1/11/2024 in #front-end
Aren't custom properties inherited?
Yes I was using the underscore for that very purpose. I think there must have been some mistake elsewhere in my code or maybe something weird in my cache for the page I was working on. I was sincerely experiencing something like the following. 
.parent{
  --_width: 100px;
}

.child{
  width: var(--_width);
}
.parent{
  --_width: 100px;
}

.child{
  width: var(--_width);
}
...and the child width wouldn't work unless I added --_width:inherit; to the child. It sounds like it was a buggy edgecase though, rather than expected behavior? I wonder if I accidentally declared the parent after the child and perhaps that made a difference. (I can't quite remember where in my code this actually was now!)
7 replies
KPCKevin Powell - Community
Created by Jacord on 11/24/2023 in #front-end
selectable transparent text with readable background and aria-hidden="true"
the image shows the focus state and the text selected... which is slighlt off-base but functions.
2 replies
KPCKevin Powell - Community
Created by Jacord on 3/20/2023 in #front-end
Preventing Flexbox 'runts' with CSS
20 replies
KPCKevin Powell - Community
Created by Jacord on 3/20/2023 in #front-end
Preventing Flexbox 'runts' with CSS
Exactly, there's no way for the 'nth' variable to 'know' how many items are on a line I do think the use of a pseudo element could carry over pretty well though.
20 replies