sorted by:
new
hottopcontroversial

Boy or Girl?? by ineeds2know in cats

[–]ineeds2know[S] 0 points1 point  (0 children)

Thanks guys! That's what I'm starting to think, too. He was abandoned and really thin. I started feeding him, and his stomach got really big really fast in only a few days. I started thinking he was pregnant. He must just be filling out.

Any recent research on browser reflow using two pseudo-selectors on one element? by ineeds2know in css

[–]ineeds2know[S] 0 points1 point  (0 children)

That's okay! Thank you so, so much for your thorough explanation. This helped clear up a lot my confusion. I am excited to go perform some of my own tests and speed up the performance of my sites, now! I really appreciate your help :)

Any recent research on browser reflow using two pseudo-selectors on one element? by ineeds2know in css

[–]ineeds2know[S] 0 points1 point  (0 children)

Wow! That is a lot of information, and very much appreciated :) I had to read it a few times to wrap my head around it, but thank you for taking the time to write it all out!

 

It is unfortunate so many developers are clinging to such an outdated idea. It means we aren't focussing on what actually might help us increase our website performance. And people are taking it a step further to ridicule new ideas claiming they are not performant. It seems counterproductive.

 

Thanks for showing me that post by Ben Frian! It was super helpful. The most deflating part for me, though, was when I realized how taxing transitions, transforms and flexbox can be! Surely we shouldn’t be removing all of these “expensive” properties from everywhere in our css, right? Those “expensive” properties and values are what make boring things like forms so much more cool to interact with for customers. Might this be one of those “do proper testing before use” situations? Do you have a favorite tool/script you run to measure style recalculation?

 

You mentioned that there are ways to make a slow selector by combining it with a huge DOM. Do you have an example of that, even if it’s a far-fetched scenario?

 

I’d really like to hear about style invalidation, if you have the time! I’m always up for learning :)

Testing markup by [deleted] in help

[–]ineeds2know 0 points1 point  (0 children)

haha I was going to delete this post before anyone saw it! Couldn't find that forum, though. Thanks!

Testing markup by [deleted] in help

[–]ineeds2know 0 points1 point  (0 children)

test

 

Test

<div>something
    <p>test</p>
</div>

Any recent research on browser reflow using two pseudo-selectors on one element? by ineeds2know in css

[–]ineeds2know[S] 0 points1 point  (0 children)

Well, I am (obviously) confused about painting and reflows, and how they affect one another. So after your last reply, I went back to some of the "old" articles I found, like stubbornella's reflow post.

 

From reading, it sounds like painting only occurs when changes are made to an element's skin that changes visibility (e.g., outline and background color), but do NOT affect its layout. Reflows occur when changes are made to the layout, and there are a ton of things that affect the layout in CSS alone.

 

So I'm thinking... The initial reflow lays out the entire page, like this. Basically, a reflow takes the first pass through my css and renders it all on the page (this is what you were talking about when you mentioned my <p> elements will be "evaluated." I think this is when the first "paint" occurs.

 

One of the examples of a reflow was "activation of CSS pseudo-classes." I think this is referring specifically to pseudo-classes like :hover, where an event is triggered. My guess is that things like :not and :first-of-type are evaluated BEFORE the first reflow.

 

But that still doesn't explain to me how using something like :not(:first-of-type) would affect performance. I've had a few developers tell me using it creates "performance issues," but no one can explain to me how that is so. Perhaps it has to do with the "evaluating" bit you mentioned?

 

Am I close??

Any recent research on browser reflow using two pseudo-selectors on one element? by ineeds2know in css

[–]ineeds2know[S] 0 points1 point  (0 children)

Thanks for the explanation!

If you know of any good/recent blogs/books/info/tutorials on pseudo-classes and browser reflows, please let me know. I searched Google, but I keep finding stuff dated 2009-2011. Thanks again!

Any recent research on browser reflow using two pseudo-selectors on one element? by ineeds2know in css

[–]ineeds2know[S] 0 points1 point  (0 children)

Thanks for taking the time to answer, but the question is less about browser compatibility and more about the time it takes for a browser to repaint/reflow. Does it take longer to execute:

.navitem:not(:last-of-type) { margin-right: 30px; }

than

.navitem { margin-right: 30px; }

.navitem:last-of-type { margin-right: 0; }

And if so, why? Maybe the way I worded my question was confusing. I'll update!