remove id collision caveat from documentation
This commit is contained in:
parent
85422ea412
commit
94ae12f697
1 changed files with 0 additions and 48 deletions
|
@ -141,51 +141,3 @@ in an initializer._
|
|||
### Further reading
|
||||
|
||||
- Stack Overflow: [Why you should not write inline JavaScript](http://programmers.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting)
|
||||
|
||||
## ID-based CSS selectors need to be a bit more specific
|
||||
|
||||
Normally, because HTML `id` attributes need to be unique to the page, it's
|
||||
perfectly fine to write some JavaScript like the following:
|
||||
|
||||
```javascript
|
||||
$('#js-my-selector').hide();
|
||||
```
|
||||
|
||||
However, there's a feature of GitLab's Markdown processing that [automatically
|
||||
adds anchors to header elements][ToC Processing], with the `id` attribute being
|
||||
automatically generated based on the content of the header.
|
||||
|
||||
Unfortunately, this feature makes it possible for user-generated content to
|
||||
create a header element with the same `id` attribute we're using in our
|
||||
selector, potentially breaking the JavaScript behavior. A user could break the
|
||||
above example with the following Markdown:
|
||||
|
||||
```markdown
|
||||
## JS My Selector
|
||||
```
|
||||
|
||||
Which gets converted to the following HTML:
|
||||
|
||||
```html
|
||||
<h2>
|
||||
<a id="js-my-selector" class="anchor" href="#js-my-selector" aria-hidden="true"></a>
|
||||
JS My Selector
|
||||
</h2>
|
||||
```
|
||||
|
||||
[ToC Processing]: https://gitlab.com/gitlab-org/gitlab-ce/blob/8-4-stable/lib/banzai/filter/table_of_contents_filter.rb#L31-37
|
||||
|
||||
### Solution
|
||||
|
||||
The current recommended fix for this is to make our selectors slightly more
|
||||
specific:
|
||||
|
||||
```javascript
|
||||
$('div#js-my-selector').hide();
|
||||
```
|
||||
|
||||
### Further reading
|
||||
|
||||
- Issue: [Merge request ToC anchor conflicts with tabs](https://gitlab.com/gitlab-org/gitlab-ce/issues/3908)
|
||||
- Merge Request: [Make tab target selectors less naive](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/2023)
|
||||
- Merge Request: [Make cross-project reference's clipboard target less naive](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/2024)
|
||||
|
|
Loading…
Reference in a new issue