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.

Sign up for GitHub

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

Jump to bottom

Stylish had analytics and data collection implemented #478

Closed
DavidMacDonald opened this issue Sep 13, 2018 · 15 comments
Closed

Stylish had analytics and data collection implemented #478

DavidMacDonald opened this issue Sep 13, 2018 · 15 comments
Labels
Techniques

Comments

@DavidMacDonald
Copy link
Contributor

"Stylish had analytics and data collection implemented that didn't comply with the privacy policy of the Chrome Webstore"

Should we contact them. Important tool for WCAG 2.1
@mraccess77
Copy link

We have all switched to Stylus now -- a different extension.

@DavidMacDonald
Copy link
Contributor Author

Thanks Jonathan

wow... two plugins that do the same thing, one called stylish, the other called stylus.
One of them is blocked in most corporate environments for justifiable security concerns. We should probably add a note in our techniques to get the right name.

@alastc
Copy link
Contributor

alastc commented Sep 25, 2018

Need an update to: https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

@allanj-uaag
Copy link
Contributor

allanj-uaag commented Sep 25, 2018 via email

@alastc
Copy link
Contributor

alastc commented Sep 25, 2018

It is now an open source project with a virtual team of contributors, it's probably best to just go with:

Stylus browser extension: https://github.com/openstyles/stylus/blob/master/README.md

@alastc alastc mentioned this issue Sep 25, 2018
Merged
@detlevhfischer
Copy link
Contributor

I have now installed the Stylus extension in Firefox - but is there any source as to what CSS to use to test SC 1.4.12 Text spacing?

@alastc
Copy link
Contributor

alastc commented Sep 26, 2018

You can copy this gist, or Steve's bookmarklet is a quick option if the site allows external styling.

@mraccess77
Copy link

Many of us have created favlets based on what we believe to be the values. I have one here https://labs.levelaccess.com/index.php/Text_Spacing_Favlet There certainly could be some discussion as to the exact CSS needed. For example, we use margin bottom on the p element for the paragraph spacing. Note that div is not included as it is a generic element but many people often use divs to act like paragraphs.

@awkawk
Copy link
Member

awkawk commented Sep 26, 2018

@detlevhfischer try:

body {
     line-height: 1.5rem !important;
     letter-spacing: .12rem !important;
     word-spacing: .16rem !important;
}
       
p {margin-bottom: 2em !important;}

@alastc
Copy link
Contributor

alastc commented Sep 26, 2018

I don't think body gets inherited to everything, * is a better option there.

@jake-abma
Copy link
Contributor

jake-abma commented Sep 30, 2018 •
edited
Loading

Just a note!

When helper / spacer classes are used they will never be overwritten by either body / p or *, even when !important is used as helper / spacer classes always use !important.

Lots of CSS frameworks, open source or created from within companies use those, we do, as well as Bootstrap for example: https://getbootstrap.com/docs/4.1/utilities/spacing/

So for the following these will never work, and the cascade will be overwritten by specificity:

HTML
<p class="mb-3">Paragraph with lots of important text</p>

CSS

body {
  line-height: 1.5rem !important;
  letter-spacing: .12rem !important;
  word-spacing: .16rem !important;
}
       
p {
  margin-bottom: 2em !important;
}

.mb-3 {
  margin-bottom: 1.5em !important;  
}

* {
  line-height: 1.5rem !important;
  letter-spacing: .12rem !important;
  word-spacing: .16rem !important;
  margin-bottom: 2em !important;
}

@jake-abma
Copy link
Contributor

A solution might look like this
IF...
there is no ID or class already present on the body
AND
there's no objection to this kind of technique:

HTML inject ID or class on body
<body id="text-spacing"> OR <body class="text-spacing">

CSS

#text-spacing * {
  line-height: 1.5rem !important;
  letter-spacing: .12rem !important;
  word-spacing: .16rem !important;
  margin-bottom: 2em !important;
}

OR

.text-spacing * {
  line-height: 1.5rem !important;
  letter-spacing: .12rem !important;
  word-spacing: .16rem !important;
  margin-bottom: 2em !important;
}

@jake-abma
Copy link
Contributor

Another Note on this kind of tests might be the use of helper / spacer classes in combination with mixins from within CSS Preprocessors like SASS or LESS where combined selectors inherit the !important. Specificity will take over and will... again... undo the styling properties.

At least it must be mentioned this might happen.

@alastc
Copy link
Contributor

alastc commented Sep 30, 2018

Hi Jake,

Thanks for pointing that out, I did a quick test and adding a class to the body seems to work, so a little update to the bookmarklet sorts that out.

It's annoying that is needed though, it seems there is a way of preventing things like Stylish from working on everything.

@awkawk
Copy link
Member

awkawk commented Oct 9, 2018

Resolved with
f8ff4aa 7

@awkawk awkawk closed this as completed Oct 9, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Techniques
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@alastc @DavidMacDonald @awkawk @mraccess77 @jake-abma @allanj-uaag @detlevhfischer