Another rendering
mode: position
Moving things with position
Positioned layout lets you define precisely where an
element should be in the page (mdn).
You can use positioned layout doing the following:
1. Define a position method:
Static, fixed, absolute, relative
2. Define offsets: top, left, bottom, and right
3. (optional) Define z-index for overlapping layers (mdn)
Let's check it out!
Moving things with position
To specify exactly where an element goes, set
its top, left, bottom, and/or right offset.
The meaning of these offset values depend on the
reference point set by position:
- static: no reference point; static block can't move
(this is the default style for every element)
- fixed: a fixed position within the viewport
- absolute: a fixed position within its "containing
element"
- relative: offset from its normal static position
position: static
(nothing happens!)
- static is the default value for position
- If you use top / left / bottom / right without
setting a non-static position, nothing will happen
(CodePen)
position: fixed
#menubar {
position: fixed; 50px
top: 50px;
right: 100px;
}
100px
- For fixed positioning, the
offset is the distance
positioned relative to the
viewport.
- The element does not
move when scrolled. Often used to implement
- Element is removed from UIs; control bars that
normal document flow, shouldn't go away
positioned on its own layer
position: fixed
(CodePen)
position: absolute
#menubar {
position: absolute; 50px
left: 400px;
top: 50px;
}
400px
- For absolute positioning,
the offset is the distance
from the "containing
element", which is the
viewport by default
- Element is removed from
normal document flow,
positioned on its own layer
position: absolute
(CodePen)
position: relative
For position: relative; the element is placed where it would
normally be placed in the layout of the page, but shifted by the top /
left / bottom / right values.
(CodePen)
Relative absolute positioning
Let's revisit the definition of absolute positioning:
- absolute: a fixed position within its "containing
element"
- The containing element is the viewport by default
You can change the containing element by setting
"position: relative;" on some parent of your
absolutely positioned element!
Relative absolute positioning
#area2 {
position: relative;
} 50px
#menubar {
position: absolute;
300px
left: 400px;
top: 50px;
}
Offsets are relative to the first parent element that has
position: relative which in this case is #area2
Common use case: Overlay
(CodePen)
Let's revisit Squarespace again!
(link to solution)
Random useful CSS
calc
You can use the calc CSS function to define numeric
values in terms of expressions:
width: calc(50% - 10px);
width: calc(100% / 6);
(MDN details of calc)
CSS variables
Variables are a brand-new CSS feature (caniuse).
:root {
--primary-color: hotpink;
}
h1 {
background-color: var(--primary-color);
}
(MDN details of CSS variables)
background properties
An easy way to render images stretched and cropped to a
given size: set it as a background image for an element.
background-image: url([Link]);
(CodePen)
background properties
You can then use additional background properties to
further style it:
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
background-position: top;
background-position: center;
(CodePen: Try resizing the window)
Web Fonts
You can use Google Fonts to choose from better fonts:
Web Fonts
You can use Google Fonts to choose from better fonts:
The instructions are
pretty self-explanatory:
Basically, add the given
<link> tag into the
<head> section of your
page alongside your
other CSS files.
Aside: Fallback fonts
Notice that the Google Font example shows a
comma-separated list of values for font-family:
- Each successive font listed is a fallback, i.e. the font that will be
loaded if the previous font could not be loaded
- There are also six generic font names, which allows the browser to
choose the font based on intent + fonts available on the OS.
- It's good practice to list a generic font at the end of all your
font-family declarations.
Hosted fonts with @font-face
You can also load your own font via @font-face:
- Give it your own font name
- Link to where the font file is found
CodePen
Mobile web
Say you have the following website:
Q: What does it look like on a phone?
Not terrible… but pretty small and hard to read.
Responsive web design
We want to write our CSS in a way that can look nice in a
wide range of screen sizes:
- 27" desktop monitor
- Macbook Air
- Samsung Galaxy S7
- iPhone 7
- iPad
Q: How do we do this?
Do we need to write totally different
CSS for every screen size?!
Mobile sizing
Unless directed otherwise via HTML or
CSS cues, mobile browsers render web
pages at a desktop screen width
(~1000px), then "zooms out" until the
entire page fits on screen.
(That's why you sometimes get web pages with
teeny-tiny font on your phone: these webpages
have not added support for mobile.)
(Read more on how this works)
Meta viewport tag
To prevent phone browsers from rendering the page at
desktop width and zooming out, use the meta viewport tag:
<meta name="viewport"
content="width=device-width, initial-scale=1">
This belongs in the <head> section of your HTML.
(Same section as the <title>, <link>, and other metadata elements.)
Meta viewport tag
Without the meta With the meta
viewport tag viewport tag
Meta viewport tag
<meta name="viewport"
content="width=device-width, initial-scale=1">
- name=viewport: "Browser, I am going to tell you how I
want the viewport to look."
- width=device-width: "The viewport's width should
always start at the device's width." (i.e., don't do that thing on
mobile where you render the page at the desktop's width)
- initial-scale=1: "Start at zoom level of 100%."
Meta viewport tag
<meta name="viewport"
content="width=device-width, initial-scale=1">
(You should pretty much always
include this tag in your HTML.)
Making adjustments
The meta viewport tag gets us almost all
the way there, but we want to make a
few adjustments.
For example, the margin seems a tad too
big on mobile. Can we set a different
margin property for mobile?
CSS media queries
You can define a CSS media query in order to change style
rules based on the characteristics of the device:
@media (max-width: 500px) {
article {
margin: 0 2px;
}
}
You can create much more complex
media queries as well.
Development strategies
Practical question: How do you test mobile layouts?
- Do you upload your HTML+CSS somewhere online and
navigate to that URL on your phone?
- Is there a way to connect your phone to your local
device?
- Do you run it in an Android/iOS emulator?
- Other?!
Chrome device mode
You can simulate a web page in a mobile layout via Chrome
device mode:
Chrome device mode
You can simulate a web page in a mobile layout via Chrome
device mode:
Chrome device mode
You can simulate a web page in a mobile layout via Chrome
device mode:
Chrome device mode
Advantages of Chrome device mode:
- Super convenient
- Mostly accurate
Disadvantages of Chrome device mode:
- Not always accurate - iPhone particularly an issue
- A little buggy
- Doesn't simulate performance issues
You should always test on real devices, too.
Chrome remote debugging
If you have an Android phone, you can debug web pages on
your phone via Chrome remote debugging.
(You can also load a server running locally on your laptop, on your phone via port forwarding.
But we haven't talked about servers yet.)
Safari remote debugging
If you have an iPhone, you can debug web pages on your
phone via Safari remote debugging.
Relative font sizes:
percent, em, rem
Relative units
Whenever possible, it's best to use relative units (like
percentage) instead of absolute units (like px).
Advantages:
- More likely to work on different screen sizes
- Easier to reason about; fewer magic numbers
10% / 80% / 10% vs 122px / 926px / 122px
Q: Should we be using relative units on font-size?
Relative font sizes: percent
You can define font sizes in terms of percentage:
(CodePen)
Relative font sizes: percent
Percent on font-size behaves exactly like percentage on
width and height, in that it's relative to the parent:
(CodePen)
Relative font sizes: percent
Percent on font-size behaves exactly like percentage on
width and height, in that it's relative to the parent:
p is 75% of its parent, which
is 200% of 30px.
(CodePen)
p's size: .75*2*30 = 45px
Relative font sizes: em
But instead of percentages, relative font sizes are usually
defined in terms of em:
- em represents the calculated font-size of the element
- 1em = the inherited font size
- 2em = 2 times the inherited font size
In other words,
font-size: 1em; is the same as font-size: 100%;
Relative font sizes: em
(CodePen)
Relative font sizes: em
(CodePen)
Relative font sizes: em
p's inherited font size is
2em, which is 60px. So
0.75em is 0.75*60 = 45px.
(CodePen)
Wait, why is <strong> 120px and not 60px?
(CodePen)
In the Chrome Inspector, we see the default browser
font-size for h1 is 2em. So it's 30*2*2 = 120px.
Relative font sizes: rem
If you do not want your relative font sizes to compound
through inheritance, use rem:
- rem represents the font-size of the root element
- 1rem = the root (html tag) font size
- 2rem = 2 times root font size
Relative font sizes: rem
(CodePen)
Relative font sizes: rem
font-size is set on the
html element, not body (or
any other tag)
(CodePen)
Relative font sizes: rem
.75em is calculated from
the root, which is 30px, so
30*.75 = 22.5px. (CodePen)
Relative font conclusions
Use relative fonts for the same purpose as using relative
heights and widths:
- Prefer em and rem over percentages
- Not for any deep reason, but em is meant for font so it's
semantically cleaner
- Use rem to avoid compounding sizes
- In addition to font-size, consider em/rem for:
- line-height
- margin-top
- margin-bottom
Mobile summary
- Always add the meta viewport tag
- Use @media queries to add styles for devices with
certain characteristics, such as screen width
- Use the Chrome Device Mode to simulate mobile
rendering on desktop
- For height and width, prefer percentages
- For fonts, prefer em and rem
- Try to minimize dependent rules (Changing the width of one
container force you to change 15 other properties to look right)
More on responsive web design