CSS
Mobility First
Common mobility problems listed by support.google.com
1. Viewport not set, or Viewport not set to “device-width”
The head section of the HTML file must contain the Viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Content wider than screen
This is because images, flex rows, or something is causing horizontal overflow.
Be sure to set max-width for img elements:
img {
max-width: 100%;
}
It’s also important to overide the default
box-sizing value of content-box
to border-box so that 100% takes into account the container’s margin.
*, *::before, *::after {
box-sizing: border-box;
}
The default value for flex-wrap
of nowrap is another common source of overflowing. Overide this
with wrap.
3. Text too small to read
A minimum font size needs to be set with clamp(min, val, max) or min(). The recommended minimum seems to be 16px.
4. Clickable elements too close together
Use additional padding to bring the tap target size up to 48px.
Touch targets should also be spaced about 8 pixels apart.
Responsive Design
https://courses.kevinpowell.co/conquering-responsive-layouts
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
@media screen and (max-width: 449px) {
}
@media screen and (min-width: 450px) {
}
@media screen and (min-width: 640px) {
}
Default style sheet for HTML 4
Type selectors
html {
display: block;
}
html:focus {
outline: none;
}
head {
display: none;
}
body {
display: block;
margin: 8px;
}
Semantic
article {
display: block;
}
aside {
display: block;
}
details {
display: block;
}
div {
display: block;
}
figcaption {
display: block;
}
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
footer {
display: block;
}
header {
display: block;
}
main {
}
mark {
background-color: yellow;
color: black;
}
nav {
display: block;
}
section {
display: block;
}
summary {
display: block;
}
time {
}
Lists
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
li {
display: list-item;
}
menu {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
menuitem {}
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
dt {
display: block;
}
dd {
display: block;
margin-left: 40px;
}
Links
a:link {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active {
color: (internal value);
}
a:visited:active {
color: (internal value);
}