CS11

15/C

S500

2W

eb D

evel

opm

ent 1

Dr D

erek

Brid

geSc

hool

of C

ompu

ter S

cien

ce &

Info

rmat

ion

Tech

nolo

gyU

nive

rsity

Col

lege

Cor

k

Exam

ple

/* Core */

@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

html {

background-image: url('mint_stripes.jpg');

/* Stripes background mint green:

http://www.publicdomainpictures.net/

view-image.php?image=148956&picture=stripes-background-mint-green

Licenced under CC BY 1.0

(https://creativecommons.org/publicdomain/zero/1.0/)

*/

background-color: rgb(204,239,219);

} *{

margin:0;

padding:0;

} body {

width:70%;

margin:1emauto;

background-color: rgb(1,92,3);

color: white;

border:1em solid rgb(1,92,3);

border-radius:1em;

font-size:16px;

font-family:'Shadows Into Light', cursive;

} nav, main, aside {

background-color: white;

color: black;

padding:1em;

border:0.0625em solid rgb(204,239,219);

border-radius:1em;

} .cocktail {

color: rgb(1,92,3);

font-weight: bold;

} img {

max-width:100%;

}

Exam

ple,

cont

inue

d/* Header */

header {

padding:2em;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-between;

align-items: baseline;

} header > h1 {

font-size:3em;

} header > p {

font-size:2em;

} Exam

ple,

cont

inue

d/* Nav */

nav {

padding:1em0;

background-color: rgb(204,239,219);

text-align: center;

} nav ul {

list-style: none;

padding:00.0625em;

} nav li li {

background-color: white;

border:0.0625em solid rgb(204,239,219);

}

Exam

ple,

cont

inue

d/* Main */

main {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-around;

align-items: flex-start;

} main > h1, main > figure, main > p {

flex-basis:100%;

} main > section {

flex-basis:48%;

min-width:15em;

margin:0.5em01em0;

border:0.0625em solid rgb(204,239,219);

border-radius:1em;

} main > h1 {

font-size:2em;

} main > section > h1 {

font-size:1.5em;

padding:01rem;

} main > section > p {

padding:01rem;

} main > p {

margin:0.5em01em0;

} main ul, main ol {

margin:0.5em01em0;

padding:0002.5em;

} main > figure,#warning{

text-align: center;

} .attribution {

display: block;

font-size:0.6em;

}

Exam

ple,

cont

inue

d/* Aside */

aside > h1 {

font-size:1.5em;

} aside > p {

margin:0.5em01em0;

border-bottom:0.0625em solid rgb(204,239,219);

} /* Footer */

footer {

padding:2em;

}

Exam

ple,

cont

inue

d/* Two-column layout */

@media screen and(min-width:50em){

nav ul {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-around;

}

nav ul li {

flex-basis:10em;

}

body {

display: grid;

grid-template-columns:75%25%;

grid-template-rows:auto;

grid-template-areas:"upper-top upper-top"

"lower-top lower-top"

"middle-left middle-right"

"bottom bottom"

}

header {

grid-area: upper-top;

}

nav {

grid-area: lower-top;

}

main {

grid-area: middle-left;

}

aside {

grid-area: middle-right;

}

footer {

grid-area: bottom;

}

}

Exam

ple,

cont

inue

d/* Three-column layout */

@media screen and(min-width:70em){

nav {

text-align: left;

background-color: white;

padding:1em0;

}

nav ul {

margin:0.5em01em0;

padding:0002.5em;

}

nav li li {

border:0;

border-bottom:0.0625em solid rgb(204,239,219);

}

body {

display: grid;

grid-template-columns:20%55%25%;

grid-template-rows:auto;

grid-template-areas:"top top top"

"middle-left middle-middle middle-right"

"bottom bottom bottom"

}

header {

grid-area: top;

}

nav {

grid-area: middle-left;

}

main {

grid-area: middle-middle;

}

aside {

grid-area: middle-right;

}

footer {

grid-area: bottom;

}

}

Exam

ple,

cont

inue

d/* Fixed-width three-column layout */

@media screen and(min-width:80em){

body {

width:60em;

}

} Com

mon

bre

akpo

ints

320p

xFo

r sm

all s

cree

n de

vice

s, li

ke p

hone

s, h

eld

in p

ortr

ait m

ode

480p

xFo

r sm

all s

cree

n de

vice

s, li

ke p

hone

s, h

eld

in la

ndsc

ape

mod

e

600p

xSm

alle

r ta

blet

s he

ld in

por

trai

t mod

e

768p

xTe

n-in

ch ta

blet

s he

ld in

por

trai

t mod

e

1024

pxTe

n-in

ch ta

blet

s he

ld in

land

scap

e m

ode,

as

wel

l as

som

e la

ptop

, net

book

and

desk

top

disp

lays

1200

pxFo

r w

ides

cree

n di

spla

ys, p

rim

arily

lapt

op a

nd d

eskt

op b

row

sers

But, th

ere

is a

muc

h w

ider

ran

ge o

f dev

ices

and

vie

wpo

rts

than

this

tabl

e as

sum

es

the

tabl

e is

not

futu

re-p

roof

Brea

kpoi

nts

Let c

onte

nt d

eter

min

e br

eakp

oint

s:

"Sta

rt w

ith th

e sm

all s

cree

n fir

st, t

hen

expa

nd u

ntil

it lo

oks

like

shit.

Tim

e fo

r a

brea

kpoi

nt!"

— S

teph

en H

ay

A br

eakp

oint

is a

ny p

oint

at w

hich

you

nee

d a

med

ia q

uery

to g

et th

e pa

ge o

ron

e of

its

com

pone

nts

to lo

ok r

ight

Som

e pe

ople

now

rec

omm

end

usin

g em

s in

stea

d of

pix

els

for

the

med

ia q

uerie

s

This

defi

nes

brea

kpoi

nts

prop

ortio

nally

and

hen

ce a

lso

wor

ks w

hen

the

user

scal

es th

e co

nten

t

It al

so e

ncou

rage

s yo

u to

defi

ne b

reak

poin

ts b

ased

on

read

abili

ty: p

eopl

e ar

em

ost c

omfo

rtab

le w

ith li

nes

of 4

5-75

cha

ract

ers

A fin

al fi

xM

any

smal

l-scr

een

devi

ces

draw

a d

istin

ctio

n be

twee

n th

e 'la

yout

vie

wpo

rt' a

ndth

e 'v

isua

l vie

wpo

rt'

E.g.

iPho

ne la

yout

vie

wpo

rt is

980

px

wid

e bu

t vis

ual v

iew

port

is 3

20 p

x w

ide

Web

pag

es a

re d

raw

n on

to th

e la

yout

vie

wpo

rt (e

.g. C

SS w

idth

s ar

e ba

sed

onth

is)

But w

hat y

ou s

ee is

just

par

t of i

t — w

hate

ver fit

s in

to th

e vi

sual

vie

wpo

rt

Zoom

out

to s

ee m

ore

of it

Que

stio

n: W

hy d

o yo

u th

ink

this

is a

pro

blem

for

us?

For

RWD

on

thes

e de

vice

s w

e ne

ed to

ove

rrid

e th

is d

efau

lt be

havi

our

by m

akin

gth

e tw

o vi

ewpo

rts

of e

qual

siz

e

Two

alte

rnat

ive

way

s of

doi

ng th

is

Add

the

follo

win

g in

side

the head

ele

men

t of y

our

HTM

L:<metaname="viewport"content="initial-scale=1.0, width=device-width"

/>

(but

this

is n

ot p

art o

f sta

ndar

d H

TML

and

it is

und

esira

ble

to d

efine

vis

ual

styl

es in

HTM

L)

Or

add

the

follo

win

g to

you

r CS

S:@viewport{width:device-width}

(but

this

is s

o ne

w th

at it

is n

ot y

et w

idel

y su

ppor

ted

by b

row

sers

)

For

now

, may

be d

o bo

th!

Revi

sion:

bac

kgro

und

imag

esW

e us

e CS

S to

giv

e an

ele

men

t a b

ackg

roun

d im

age,

e.g

.html {

background-image: url(swirly-pattern.gif);

} Any

elem

ent c

an h

ave

a ba

ckgr

ound

imag

e, n

ot ju

st body

Oth

er r

elev

ant C

SS in

clud

es:

background-repeat

with

val

ues repeat

(def

ault)

, repeat-x

, repeat-y

, no-

repeat

background-position

with

val

ues top/center/bottom

and

left/center

/right

background-attachment

with

val

ues

incl

udin

g scroll

(def

ault)

and

fixed

Also

background-size

, background-origin

, background-clip

Revi

sion:

fore

grou

nd im

ages

We

use

HTM

L to

incl

ude

a fo

regr

ound

imag

e, e

.g.

<imgsrc="wombat.jpg"

alt="Wombats are furry, have protruding front teeth and walk on all fours."

title="A wombat walking along a road"

/>

Ther

e ar

e al

so width

and

height

att

ribu

tes

—se

e be

low

You

can

also

nes

t the

img

ele

men

t ins

ide

a figure

ele

men

t, op

tiona

lly a

long

with

a figcaption

ele

men

t

Fore

grou

nd im

ages

in fi

xed-

wid

th la

yout

sIn

fixe

d-w

idth

layo

uts,

you

kno

w h

ow m

uch

spac

e (in

pix

els)

is a

vaila

ble

for

your

imag

es

As m

uch

as p

ossi

ble,

try

to c

reat

e th

e or

igin

al im

age

so th

at it

is th

e de

sire

d si

ze

If th

is is

not

pos

sibl

e, th

en s

cale

it u

sing

imag

e m

anip

ulat

ion

soft

war

e (e

.g.

Phot

osho

p, G

IMP)

It is

pos

sibl

e bu

t les

s sa

tisfa

ctor

y to

let t

he b

row

ser

scal

e th

e im

age

by s

peci

fyin

gth

e de

sire

d si

ze

eith

er in

the

HTM

L, e

.g.

<imgsrc="wombat.jpg"width="152"alt="..."/>

or in

the

CSS

img {

width:152px;

}

Que

stio

n: W

hy a

re th

ese

less

sat

isfa

ctor

y th

an u

sing

cor

rect

ly-s

ized

imag

es?

Fore

grou

nd im

ages

for l

iqui

d la

yout

sIn

liqu

id la

yout

s, y

ou d

on't

know

how

muc

h sp

ace

is a

vaila

ble

for

your

imag

es

If th

e im

age

is w

ider

than

the

avai

labl

e sp

ace,

it w

ill o

verfl

ow it

s co

ntai

ner

—un

likel

y to

look

goo

d!

One

opt

ion

is to

use

CSS

to h

andl

e th

e ov

erflo

w:

figure {

overflow: hidden;

} The overflow

pro

pert

y ha

s va

lues

that

incl

ude visible

(def

ault)

, hidden

, scroll

and auto

Fore

grou

nd im

ages

for l

iqui

d la

yout

sA

mor

e fle

xibl

e op

tion

(rec

omm

ende

d in

Res

pons

ive

Web

Des

ign)

is to

set

the

max

wid

th to

100

% in

the

CSS:

img {

max-width:100%;

}

If th

e im

age

is n

arro

wer

than

its

cont

aine

r, it

will

dis

play

at i

ts n

orm

al s

ize

If it

is w

ider

than

its

cont

aine

r, it

will

be

scal

ed d

own

to m

atch

the

wid

th o

f the

cont

aine

r

Or

(less

com

mon

) you

cou

ld s

et th

e w

idth

to 1

00%

:img {

width:100%;

} Then

the

imag

e sc

ales

up

or d

own

to m

atch

the

cont

aine

r

Que

stio

n: T

his

look

s go

od. B

ut w

hat a

re th

e di

sadv

anta

ges?

Back

grou

nd im

ages

for l

iqui

d la

yout

sBa

ckgr

ound

imag

es a

re le

ss o

f a p

robl

em

By d

efau

lt, th

ey ti

le

So th

ey w

ill c

over

the

elem

ent (

irres

pect

ive

of it

s si

ze),

with

out s

calin

g

Or

you

can

use

the background-size

pro

pert

y to

sca

le th

em, e

.g.

html {

background-image: url(swirly-pattern.gif);

background-size: cover;

} Or

you

can

use

med

ia q

ueri

es to

load

diff

eren

t im

ages

for

diff

eren

t vie

wpo

rtsi

zes

Vide

os fo

r liq

uid

layo

uts

Revi

sion

: how

to e

mbe

d yo

ur o

wn

vide

o in

to a

web

pag

e:<videowidth="640"height="360"controls>

<sourcesrc="mojito.webm"type="video/webm">

</video>

Now

, for

RW

D, w

e ca

n do

wha

t we

did

with

imag

es:

video {

max-width:100%;

} Ther

e se

ems

to b

e so

me

disa

gree

men

t abo

ut w

heth

er it

is b

ette

r to

als

o re

mov

eth

e he

ight

and

wid

th a

ttri

bute

s, o

r ju

st th

e he

ight

, or

neith

er

See

also

this

mor

e ex

tens

ive

trea

tmen

t of t

his

topi

c