Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3

Thot

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

Maybe you can have the code checked again by KI.

You have more knowledge than me. This throws AI out:

GPT-4o mini

Your CSS code appears to be using some advanced features, including the :has() pseudo-class and CSS custom properties (variables). Here are a few points to consider regarding potential issues or improvements:

Browser Support: The :has() pseudo-class is not supported in all browsers. As of my last knowledge update in October 2023, it is supported in modern browsers like Chrome and Safari, but not in Firefox. If you need to support older browsers or Firefox, consider alternative approaches.

Variable Fallbacks: You are using var(--_arrow-size, .36rem) and similar constructs. The fallback values (like .36rem) are only used if the variable is not defined. Ensure that you want these fallbacks, as they may not be necessary if you always define the variables.

Positioning: The position: absolute; property in the .observer::after selector means that the element will be positioned relative to the nearest positioned ancestor. Make sure that the parent element has a position property set (like relative, absolute, or fixed) to ensure the arrow is positioned correctly.
CSS Specificity: If the styles are not applying as expected, check for specificity issues. Ensure that there are no other conflicting styles that might override these rules.

Performance: Using :has() can have performance implications, especially if used in a large DOM. Use it judiciously.
Debugging: If the styles are not rendering as expected, use browser developer tools to inspect the elements and see if the styles are being applied correctly. Look for any overridden styles or issues in the computed styles.

Syntax: The syntax looks correct, but ensure that your CSS preprocessor (if you're using one) supports the nesting syntax you are using (like SCSS or LESS).

HalleAndert

@Thot Just for context: I am a professional lead developer and also work a lot with CSS professionally.

Back to the actual topic.
The other mods can cause problems. To prevent problems, I initially chose the nested CSS approach. You could try positioning the parent element relatively.

.UrlBar-AddressField:has(.toolbar:empty) .observer {
	position: relative;
}

Thot

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

@Thot Just for context: I am a professional lead developer and also work a lot with CSS professionally.

Back to the actual topic.
The other mods can cause problems. To prevent problems, I initially chose the nested CSS approach. You could try positioning the parent element relatively.
.UrlBar-AddressField:has(.toolbar:empty) .observer {
	position: relative;
}

And what to put under this?

Edit: Tried diffeernt modifications. Have no clou.

HalleAndert

@Thot Here is the complete code:

/* Address field drop down arrow */
.UrlBar-AddressField:has(.toolbar:empty) .observer {
  position: relative;
}

.UrlBar-AddressField:has(.toolbar:empty) .observer:after {
  --_arrow-size: .36rem;
  --_arrow-offset-x: 0rem;
  --_arrow-offset-y: 0rem;
  --_arrow-transform-origin-offset-y: .05rem;

  content: "";
  position: absolute;
  right: calc((var(--_arrow-size, .36rem) - var(--_arrow-offset-x, 0rem)) * 2);
  top: calc(50% - (var(--_arrow-size, .36rem) + var(--_arrow-offset-y, 0rem)) / 2);
  border: var(--_arrow-size, .35rem) solid transparent;
  border-top-color: inherit;
  transition: 250ms ease-in-out;
  transform-origin: center calc((var(--_arrow-size, .36rem) - var(--_arrow-transform-origin-offset-y, .05rem)) / 2);
  opacity: .4;
}

.UrlBar-AddressField:has(.toolbar:empty) .observer:has(.OmniDropdown):after {
  opacity: .75;
  transform: rotateZ(180deg);
}

Thot

@HalleAndert said in Address bar typed history dropdown – Vivaldi Browser snapshot 3617.3:

@Thot Here is the complete code:

No. I even deleted my other mods for this. Sorry no. Never mind, thank you for everything.

HalleAndert

@Thot With pleasure. I'm very sorry it's not working for you. I hope that the arrow will be included natively in a future update. Have a nice evening.

dhowcruisedubai

This post is deleted!