SirAlan Posts - Answer Overflow

SirAlan

Posts Comments

KPCKevin Powell - Community

•Created by SirAlan on 1/9/2024 in #front-end

Best practice for semantic/accessible side menu

17 replies

KPCKevin Powell - Community

•Created by SirAlan on 5/30/2023 in #front-end

text-wrap: balance conflicting with overflow-wrap: break-word

3 replies

KPCKevin Powell - Community

•Created by SirAlan on 2/16/2023 in #front-end

Debugging a Safari redrawing performance issue, causing finished animations to slow down rendering

I have a proof of concept for an interactive tool that leverages javascript to track mouse movement and update custom properties on the html element. There is some css that is centering a radial-gradient at the coordinates of the mouse. It's actually really performant in Firefox, Chrome and Edge. But it's very strained in Safari. In the timelines, I've tracked it down to power being used reapplying intro animations that have already completed. These are CSS animations that are applied to certain elements to make them popup when they are scrolled into view (they have animation-fill-mode:both set). When I turn off all those animations (e.g. just unset all animation-name on all elements), then the effect is very smooth again in Safari. And the intro are smooth when scrolling. It's definitely a quirk that only applies to Safari and definitely relating the fact that animations have been applied, even if they have completed. Is there something I can try in the approach of debugging, that would help solve why Safari is trying to re-render completed animations? For example, I thought perhaps Javascript could unset the animation-name after a certain amount of time but seems like a bit of an inelegant fix.

7 replies

KPCKevin Powell - Community

•Created by SirAlan on 2/7/2023 in #front-end

Thoughts on attribute selectors

Want to open this for thoughts on using attribute selectors. I’ve always used classes for modifying elements to different presentation configurations. What I mean is, as a contrived example: <div class=“feature feature-icon-top feature-full-width feature-reduced-padding”> Then using simple selectors :

.feature-icon-top{}
.feature-full-width{}

Etc I’ve recently started using attributes because I like how it separates the class and the modifications, and helps to easily understand the code. In particular, I’m using HTL and slightly in AEM so a class with so many inline codes is difficult to read. Again a contrived example:

<div class=“feature”
   icon-position=“top”
   feature-width=“full”
   feature-padding=“reduced”>

However, when constructing css selectors, I understand attributes are unqualified selectors which can have detrimental performance hit:

.feature[icon-position=“top”]{}
.feature[feature-width=“full”]{}

Etc In reality, I don’t notice any issues on the page, it’s fast and performant. But I’m inviting other points of view on this approach - are we talking about potentially significant effects on performance? Is it bad practice? Any other considerations? Would the ordering help, ie [icon-position=“top”].feature{} Or simplify even more [icon-position]{}

3 replies

KPCKevin Powell - Community

•Created by SirAlan on 10/14/2022 in #front-end

Checking if input[type=search] will show the X to clear input

One of the handy things about <input type="search"> is when the browser shows the X that will clear the input. But it varies between browsers. Chrome and Safari show it but Firefox doesn't. Haven't checked on mobiles but it would most likely depend on client. I have a <input type="reset"> field and don't want to have both showing at once. Is there a way of only showing the reset if the browser won't show the clear search field natively? Any other considerations for me?

3 replies

KPCKevin Powell - Community

•Created by SirAlan on 9/28/2022 in #front-end

CSS property { inherits }

Something that I don't quite understand is how the inherits setting inside the property definition works. Take, for instance,

@property --theme {
  syntax: '<color>';
  initial-value: #22517b;
  inherits: false;
}

What effect does inherits have? I understand the concept of CSS inheritance, like you can say color:inherits so it will take a value of the nearest parent definition (if any). But I'm not sure how this translates to the css property.

9 replies

Gaming

Programming