remove id collision caveat from documentation
This commit is contained in:
		
							parent
							
								
									85422ea412
								
							
						
					
					
						commit
						94ae12f697
					
				|  | @ -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 New Issue