Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Leverage the :scope pseudo-class instead of the ID hack where possible #4453

Closed
mgol opened this issue Aug 9, 2019 · 6 comments · Fixed by #4454 or jquery/sizzle#453
Closed

Leverage the :scope pseudo-class instead of the ID hack where possible #4453

mgol opened this issue Aug 9, 2019 · 6 comments · Fixed by #4454 or jquery/sizzle#453
Assignees
Labels
Milestone

Comments

@mgol
Copy link
Member

mgol commented Aug 9, 2019

Description

The :scope pseudo-class has surprisingly good browser support: Chrome, Firefox & Safari have supported if for a long time; only IE & Edge lack support. We could leverage this pseudo-class to get rid of the ID hack in most cases. Adding a temporary ID may cause layout thrashing which was reported a few times in the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors require us to change context to the parent and then :scope stops applying to what we'd like. But it'd still improve performance in the vast majority of cases.

I've attached the 3.4.2 milestone as the patch seems simple enough that I'd like to backport it to Sizzle. It'd be a nice perf win in a patch release.

Link to test case

N/A

@mgol mgol added the Selector label Aug 9, 2019
@mgol mgol added this to the 3.4.2 milestone Aug 9, 2019
@mgol mgol self-assigned this Aug 9, 2019
mgol added a commit to mgol/jquery that referenced this issue Aug 9, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
@mgol
Copy link
Member Author

mgol commented Aug 9, 2019

PR: #4454

mgol added a commit to mgol/jquery that referenced this issue Aug 9, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Aug 12, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Aug 12, 2019
…L support)

The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit that referenced this issue Aug 19, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes gh-4453
Closes gh-4454
Ref gh-4332
Ref jquery/sizzle#405
@mgol
Copy link
Member Author

mgol commented Aug 19, 2019

The PR landed on master but it also needs to land in Sizzle if we want it in jQuery 3.4.2. Therefore, I'm reopening this issue for now to investigate if that's feasible.

@mgol mgol reopened this Aug 19, 2019
mgol added a commit to mgol/sizzle that referenced this issue Aug 19, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
@mgol
Copy link
Member Author

mgol commented Aug 19, 2019

Sizzle PR: jquery/sizzle#453

@mgol
Copy link
Member Author

mgol commented Aug 19, 2019

I added the "Needs review" label to indicate the Sizzle PR needs to be reviewed (as we don't track such a label there).

mgol added a commit to mgol/sizzle that referenced this issue Aug 20, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
mgol added a commit to mgol/sizzle that referenced this issue Aug 20, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
mgol added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
mgol added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
mgol added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
mgol added a commit to mgol/sizzle that referenced this issue Aug 21, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
mgol added a commit to mgol/jquery that referenced this issue Aug 26, 2019
…L support)

The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquerygh-4453
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/sizzle that referenced this issue Oct 1, 2019
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Fixes jquery/jquery#4453
Ref jquery/jquery#4454
Ref jquery/jquery#4332
Ref jquerygh-405
@mgol
Copy link
Member Author

mgol commented Oct 10, 2019

The Sizzle PR landed. Reopening since we still need to update Sizzle in jQuery 3.x.

@mgol
Copy link
Member Author

mgol commented Mar 16, 2020

Sizzle update merged in #4641. The issue is now fixed both on master & on 3.x-stable.

@mgol mgol closed this as completed Mar 16, 2020
mgol added a commit to mgol/jquery that referenced this issue Sep 8, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Sep 12, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Sep 19, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Sep 21, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Oct 3, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Oct 4, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Nov 17, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Dec 1, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
mgol added a commit to mgol/jquery that referenced this issue Dec 13, 2022
The `:scope` pseudo-class[1] has surprisingly good browser support: Chrome,
Firefox & Safari have supported if for a long time; only IE & Edge lack support.
This commit leverages this pseudo-class to get rid of the ID hack in most cases.
Adding a temporary ID may cause layout thrashing which was reported a few times
in [the past.

We can't completely eliminate the ID hack in modern browses as sibling selectors
require us to change context to the parent and then `:scope` stops applying to
what we'd like. But it'd still improve performance in the vast majority of
cases.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Ref jquerygh-4453
Ref jquerygh-4454
Ref jquerygh-4332
Ref jquery/sizzle#405
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment