Skip to content

Instantly share code, notes, and snippets.

@missmatsuko
missmatsuko / user.css
Last active May 23, 2020
Custom browser content stylesheet
View user.css
/* Hide Google smartlock login popup */
iframe[src^="https://smartlock.google.com/"] {
display: none !important;
}
/* Brighter Netflix and YouTube videos */
video[src^="blob:https://www.netflix.com/"],
video[src^="blob:https://www.youtube.com/"] {
filter: brightness(1.4);
}
View international-emphasis-typography.md

Overview

Seems like <em> is styled as italic regardless of language. Different languages have different conventions for indicating emphasis. For example, <em> should not be styled as italic in Japanese because it can make the text illegible.

From what I can tell, <em> should only be styled as italic for languages using Latin alphabets, but more research is needed to figure out how <em> should be styled in different languages.

W3C discussing it here

Collection of notes on emphasis typography for different languages

View top-bottom-left-right.md

The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

div {
  :  ||  || auto || inherit;
}

You might use it, for example, to nudge an icon into place:

button .icon {
  position: relative;
View top.md

The top property is used with position to set the top placement of an element. It only has an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

Syntax

div {
  top: <length> || <percentage> || auto || inherit;
}
View reset.css
*,
*:after,
*:before {
box-sizing: border-box;
}
body,
html,
blockquote,
figure,
@missmatsuko
missmatsuko / a11y-debug-focus.js
Created Jul 31, 2019
a11y debug focus script - logs active element on tab
View a11y-debug-focus.js
document.addEventListener('keyup', (e) => {
if (event.key === 'Tab') {
console.log(document.activeElement);
}
});
View alt-text-for-social-media.csv
Social Network Dedicated Image Alt Text Platforms
Instagram [Yes](https://help.instagram.com/503708446705527) iOS and Android
Facebook [Yes](https://www.facebook.com/help/214124458607871) iOS and Computer
LinkedIn Yes Computer
Twitter [Yes](https://help.twitter.com/en/using-twitter/picture-descriptions) iOS and Android and Computer
View a11y-project_quick-test_navigate-using-just-your-keyboard.md

Introduction

Testing your site for keyboard navigation will ensure that keyboard users can access your site.

As a bonus, sites that can be navigated with a keyboard can also likely be navigated using other input devices.

How to navigate a website with a keyboard

Generally, pressing tab moves focus between elements and pressing enter will interact with them.

If you are using Safari, option-tab is the default keyboard shortcut to move focus between elements.

You can’t perform that action at this time.