{"action":"created","issue":{"url":"https://api.github.com/repos/contao/core/issues/7541","labels_url":"https://api.github.com/repos/contao/core/issues/7541/labels{/name}","comments_url":"https://api.github.com/repos/contao/core/issues/7541/comments","events_url":"https://api.github.com/repos/contao/core/issues/7541/events","html_url":"https://github.com/contao/core/issues/7541","id":52981195,"number":7541,"title":"Remove the class conflict (invisible) with html5-boilerplate","user":{"login":"lionel-m","id":814476,"avatar_url":"https://avatars.githubusercontent.com/u/814476?v=3","gravatar_id":"","url":"https://api.github.com/users/lionel-m","html_url":"https://github.com/lionel-m","followers_url":"https://api.github.com/users/lionel-m/followers","following_url":"https://api.github.com/users/lionel-m/following{/other_user}","gists_url":"https://api.github.com/users/lionel-m/gists{/gist_id}","starred_url":"https://api.github.com/users/lionel-m/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lionel-m/subscriptions","organizations_url":"https://api.github.com/users/lionel-m/orgs","repos_url":"https://api.github.com/users/lionel-m/repos","events_url":"https://api.github.com/users/lionel-m/events{/privacy}","received_events_url":"https://api.github.com/users/lionel-m/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2014-12-28T13:33:40Z","updated_at":"2015-01-11T17:19:43Z","closed_at":null,"body":"html5-boilerplate use `.hidden`, `.visuallyhidden`, `.invisible` for the three main methods used to remove the visibility of an element.\r\n\r\nThe `.invisible` class of Contao is ~ equivalent to the `.visuallyhidden` class of html5-boilerplate. This can be a source of error if the file `main.css` of html5-boilerplate is not modified. In this case the following code is used:\r\n\r\n```CSS\r\n.invisible {\r\nvisibility: hidden;\r\n}\r\n```\r\nhtml5-boilerplate is popular and we should consider changing the `.invisible` class of Contao with `.visuallyhidden`and this class name also better reflects the goal.\r\n\r\nDo we have the opportunity to change this class name with Contao 4?"},"comment":{"url":"https://api.github.com/repos/contao/core/issues/comments/69502167","html_url":"https://github.com/contao/core/issues/7541#issuecomment-69502167","issue_url":"https://api.github.com/repos/contao/core/issues/7541","id":69502167,"user":{"login":"lionel-m","id":814476,"avatar_url":"https://avatars.githubusercontent.com/u/814476?v=3","gravatar_id":"","url":"https://api.github.com/users/lionel-m","html_url":"https://github.com/lionel-m","followers_url":"https://api.github.com/users/lionel-m/followers","following_url":"https://api.github.com/users/lionel-m/following{/other_user}","gists_url":"https://api.github.com/users/lionel-m/gists{/gist_id}","starred_url":"https://api.github.com/users/lionel-m/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lionel-m/subscriptions","organizations_url":"https://api.github.com/users/lionel-m/orgs","repos_url":"https://api.github.com/users/lionel-m/repos","events_url":"https://api.github.com/users/lionel-m/events{/privacy}","received_events_url":"https://api.github.com/users/lionel-m/received_events","type":"User","site_admin":false},"created_at":"2015-01-11T17:19:43Z","updated_at":"2015-01-11T17:19:43Z","body":"> How do the other CSS frameworks such as Foundation and Bootstrap name the corresponding class? I doubt that there is a \"one size fits all\" solution here.\r\n\r\nThat's right e.g. suitcss: `u-hiddenVisually`, Bootstrap `sr-only`, Foundation `element-invisible`, etc. But this change is to avoid an issue regarding accessibility in the case where html5-boilerplate is used.\r\n\r\nIf we have to replace the current name with a new one, I propose to use `visuallyhidden` because it gives a clear information on its purpose."}}