Côté client

(1)

Cyril Concolato

Technologies Web Côté client

INF228

Cyril Concolato – 2013

(2)

Cascading Style Sheets

(3)

Cyril Concolato

CSS:

What is it? Why?

 A Language to associate style to documents

• To separate the content of a document from its style / presentation

• To manage presentation aspects separately from structural aspects

• To present the content differently to different users, in different contexts of use

 Companion language to HTML

• But can be applied to any document structured with a tree (e.g. XML, SVG)

 Demonstration

• Deactivate CSS

PESTO - Technologies Web - Côté Client 45

(4)

 Latest specifications

• CSS 1.0

─ Adopted after HTML 2 to enrich presentations

• CSS 2.1:

─ Stable version, implemented interoperably by browsers

• CSS 3:

─ Modular specification of extensions to CSS 2.1

─ Many additions (50+ modules in 2012)

─ Partly implemented by browsers

CSS:

A bit of history

CSS 1.0 (1996)

CSS 1.0 2

^nd

Ed. (1999)

CSS 2.1 (06/2011)

CSS 3.0

(??)

(5)

Cyril Concolato

 Language based on rules to be associated with document elements

• Setting visual properties (background, border, …)

• Setting spatial properties (layout, …)

• Setting text properties (fonts, …)

 A set of rules is a style sheet

• Multiple style sheets can be applied to a document

─ User style sheet

─ Author style sheet

─ Device style sheet

• The cascade dictates which rule applies where

CSS:

Principles

(6)

 Declaration block

• Declare property values

• More than 400 properties

 Selectors

• Associate property values to

one or more elements in the DOM

CSS:

Rules Syntax

selectors {

block content /* comment */

block content

(7)

Cyril Concolato

CSS:

Declaration blocks

 Content placed between { }

• property + ‘:’ + value + ‘;’

• Each property can have a specific syntax

• Some properties may have a prefix

font-family: ‘Arial';

font-style: normal;

font-weight: 600;

background-color: #fff;

border: 1px solid #fff;

font-size: 16px;

padding: 4px 9px;

border: 1px solid #D9D9D9;

width: 99%;

box-shadow: inset 0 1px 2px rgba(0,0,0,.3);

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);

background-image: url('//www.google.com/uds/css/v2/clear.png');

(8)

Short-hand properties

h1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal;

}

h1 { font: bold 12pt/14pt Helvetica }

(9)

Cyril Concolato

CSS:

Units

 Absolute lengths units

• cm, mm, in, pt, pc, px

• A millimeter is not a millimeter!

 Font-relative lengths

• em, ex, ch, rem

 Viewport-relative lengths

• vw, vh, vmin, vmax

 Percentage

• %

 Other

• s, ms, Hz, deg, grad, rad, dpi

(10)

CSS:

Selectors

 Addressing of 1 or several nodes in the document tree

• By tag name

• By tag names

p {

border-style:solid;

border-width:5px;

}

h1, em {

color: blue;

}

(11)

Cyril Concolato

CSS:

Selectors (2)

 Addressing of 1 or several nodes in the document tree

• By id attribute

• By class name

<p class="pType1">text 1</p>

<p class="pType1">text 2</p>

.pType1 {

color: blue;

}

<p id="p1">text 1</p>

<p id="p2">text 2</p>

#p2 {

color: red;

}

#p1 {

color: blue;

}

(12)

CSS:

Selectors (3)

 Advanced selectors

• All elements:

• Elements with a given attribute:

• Elements with a given attribute value:

• Element in another element:

• Other combinations: +, >, …

• Pseudo-classes (e.g. :hover)

• Pseudo-elements (e.g. :first-line)

a:link {color:#FF0000;}

h3 em { }

element[foo] {}

element[foo=‘bar’] {}

* { }

(13)

Cyril Concolato

CSS:

Inheritance

 Some property values inherit along the DOM tree

• Initial value

• Computed value

─ Relative to absolute

• Inherited value

─ ‘inherit’

(14)

CSS:

Linking CSS content with HTML content

 Attribute (inline stylesheet)

• Styles attached to a given element

 Element (internal stylesheet)

• Styles attached to a given document

 External stylesheet

• Styles can be attached to multiple documents

<p style="…">…</p>

<head>

<style>…</style>

</head

<head>

<link href="master.css"

type="text/css" rel="stylesheet" media="all"/>

(15)

Cyril Concolato

CSS:

The Box Model

(16)

Some of the most frequent CSS properties

 Box

• margin, padding, box-shadow

 border

• style, width, color, radius

 Position

• position, width, height, z-index, top, left, bottom, right

 Text

• text-shadow, text-overflow

 Background

• color, image, repeat, attachement, position(x/y)

 Font

• family, size, weight, style, variant, color, text-decoration

 Block:

• line-height, vertical-align, text-align, text-indent, white-space, word-spacing, letter- spacing

 Layout

• visibility, display, float, clear, cursor, overflow, clip

 List-*

• style-type, style-image, style-position

 Table

•

(17)

Cyril Concolato

CSS:

Basic Layout Model

 « Block » vs. « inline » progression (and others)

 Floats

 Absolute, fixed, relative

 z-index

 …

(18)

CSS Animations

 Declare animations in CSS

• Animation is started (offset) when the style is attached

• Different model from SVG

 Properties animation-*

• name, duration, timing- function, iteration-count, direction, play-state, delay

• Keyframe values

div {

animation-name: diagonal-slide;

animation-duration: 5s;

animation-iteration-count: 10;

}

@keyframes diagonal-slide { from { left: 0; top: 0; }

to { left: 100px; top: 100px; }

}

(19)

Cyril Concolato

 CSS declaration of smooth value changes between 2 states

• http://dev.w3.org/csswg/css3-transitions/

 CSS Properties: transition-*

• property, duration, timing-function, delay Ex: values before and after are not known

page 61

CSS Transitions

PESTO - Technologies Web - Côté Client

div {

transition-property: opacity;

transition-duration: 2s;

}

(20)

CSS Media Queries

 New CSS 3 rules

• Adapt the CSS rules to apply based on some client characteristics

─ Screen size or orientation

─ Type of device

(pc, print, mobile, ….)

─ Number of colors

<link rel="stylesheet"

media="screen and (max-width: 1280px)"

href="file.css" />

@media screen and (max-width: 1280px) {

/* Some CSS rules here */

(21)

Cyril Concolato

 Flexible Box Layout

 Transforms

 Animations

 Conditional Rules

 Transitions

 Grid Layout

 Text

 Multi-column Layout Module

 Regions

 Fonts

 Backgrounds and Borders

 Positioned Layout

 Image Values and Replaced Content

 Exclusions and Shapes

 Paged Media

 Writing Modes

 …

CSS:

Lots of on going works…

https://developer.mozilla.org/en-US/docs/CSS

(22)

Scalable Vector Graphics

Links

http://www.w3.org/Graphics/SVG/

http://www.w3.org/Graphics/SVG/WG/wiki/Main_Page

(23)

Cyril Concolato

SVG: a bit of history

 Initial ecosystem:

• HTML 4.01: 1999

• CSS 1.0 (2^nd ed.): 1996

• XML 1.0 (2^nd ed.): 1998

 Initial competing technologies: VML (Microsoft) and PGML (Adobe)

 Latest specifications

• SVG 1.1 (recommendation): http://www.w3.org/TR/SVG

 New ecosystem: tight integration with

• HTML 5

• CSS 3

• SVG 2.0 (draft): http://www.w3.org/TR/SVG2 (https://svgwg.org/svg2-draft/ editor’s draft)

SVG _(09/2001) ^1.0 _(04/2002) ^1.1

1.1 2

^nd

Edition (08/2011)

2.0 (06/2013)

SVG Tiny / Mobile

1.1 (04/2002)

1.1 (05/2001)

1.2 (12/2008)

page 82

(24)

 XML standard for

• 2D Vector Graphics

─ Including text & fonts

─ With specific drawing, layout, positioning rules

• With support for:

─ Styling (CSS),

─ Animations (SMIL or JavaScript),

─ Interactivity (DOM Events),

─ Scripting (DOM, JavaScript)

─ Raster images (PNG, JPG)

─ Multimedia (audio, video)

What is SVG ?

(25)

Cyril Concolato

 Graphics are described using

mathematical/geometrical primitives

• 2D objects: Lines, curves, circles, rectangles, text

• or 3D equivalent: meshes, nurbs, spheres, …

• Opposition to raster/bitmap images (pixel description)

 Rendered into pixels given a resolution

• Can be scaled without pixel artifacts

• Client-side rendering vs. server-side rendering

• Trade-off image quality vs. rendering cost

 Formats: SVG, VML, AI, PS, PDF, Flash…

Vector Graphics?

(26)

Vector Graphics & Zoomability

Source: wikipedia.org

Vector Bitmap

(27)

Cyril Concolato

Vector Graphics & Scalability

25x37 1,55 Ko

PNG

50x75 3,89 Ko

100x150 9,89 Ko

SVG

SVGZ ^{1,54 Ko}

5,93 Ko Total 15,33 Ko

Any resolution

(28)

SVG Example

<svg xmlns="http://www.w3.org/2000/svg"

viewBox = "0 0 500 600" version = "1.1">

<rect x = "100" y = "100" width = "400" height =

"200" fill = "yellow" stroke = "black" stroke- width = "3"/>

<rect x = "100" y = "350" rx = "100" ry = "50"

width = "400" height = "200" fill = "salmon"

stroke = "black" stroke-width = "3"/>

<circle cx = "100" cy = "100" r = "80" fill =

"orange" stroke = "navy" stroke-width = "10"/>

(29)

Cyril Concolato

SVG Example with group

<svg xmlns="http://www.w3.org/2000/svg"

viewBox = "0 0 500 600" version = "1.1">

<rect x = "100" y = "100" width = "400" height =

"200" fill = "yellow" stroke = "black" stroke- width = "3"/>

<g>

<rect x = "100" y = "350" rx = "100" ry = "50"

width = "400" height = "200" fill = "salmon"

stroke = "black" stroke-width = "3"/>

<circle cx = "100" cy = "100" r = "80" fill =

"orange" stroke = "navy" stroke-width = "10"/>

</g>

</svg>

(30)

 Internet Media Type (MIME type)

• image/svg+xml

 Extensions:

• .svg

• .svgz when compressed using GZIP

• Possible compression using EXI

SVG Files

(31)

Cyril Concolato

 Browser Support (desktop & mobile)

SVG Support on the Web

Source: http://caniuse.com (nov. 2012)

Source: http://mobilehtml5.org/ (nov. 2012)

(32)

 HTML in SVG:

• Use of SVG <foreignObject> element

 SVG in HTML

• Reference from an HTML document

─ Older versions of browsers:

• <embed>, <object> or <iframe>

• Inclusion (mixed namespaces) in the HTML document

• Future versions ?

─ Real mix between element from different namespaces

• <html:p>some text <svg:circle …/><html:image

…></html:p>

HTML and SVG integration

(33)

Cyril Concolato

SVG in HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<body>

<div>

<svg xmlns="http://www.w3.org/2000/svg"

width="800px" height="600px" viewBox="0 0 800 600">

…

</svg>

</div>

</body>

</html>

PESTO - Technologies Web - Côté Client 101

(34)

 Background images

element { background-image: url(test.svg); }

SVG in CSS: Styling with SVG

(35)

Cyril Concolato

 <style>

 @style

 <?xml-stylesheet?>

 Be careful with inheritance

• Animations (SMIL sandwich model)

• Inheritance path and use

─ Extensions in SVG 2.0

page 103

CSS in SVG: Styling SVG

(36)

The Graphical Web

(37)

Cyril Concolato

 Art, clipart

 Design

 User Interfaces

 Cartoons, Animations, Ads

 Science

 Cartography and mapping

 Data Visualization

 Games

 Multimedia

 …

page 121

The Graphical Web

Joshua Davis

(38)

The Graphical Web Technologies

 A set of graphical technologies used on the web

• Mostly based on web standards

─ avoiding Flash, Silverlight

• Positioning & Layout

• 2D Vector Graphics Primitives

• Rendering Model

• Graphical Effects

• Compositing, Blending, Masking

• 3D Graphics

 Offered (mostly) in two flavors

• Declaratively (SVG, CSS)

(39)

Cyril Concolato

Demo

(40)

Graphical/Text Layout

 Fixed vs. Reflowable

 CSS mostly deals with reflowable layouts

• CSS Basic Layout

• CSS Grid Layout

• CSS Flexbox Model

• CSS Regions

• CSS Exclusions

• …

 SVG deals with fixed positioning

• positions, angles, scales, …

(41)

Cyril Concolato

 Enable content to flow across multiple (non-rectangular) regions

• Useful for magazine layout

 http://dev.w3.org/csswg/css3-regions/

 http://html.adobe.com/webstandards/cssregions/

Reflowable layout: CSS Regions

(42)

 To exclude certain regions from the text flow

 http://html.adobe.com/webstandards/cssexclusions/

Reflowable layout: CSS Exclusions

(43)

Cyril Concolato

 Two major types of positioning / spatial organization

• 2D or 2.5D:

─ Objects are positioned with 2 floating-point coordinates (+

possibly a integer layer information)

─ HTML+CSS, Flash, SVG

• 3D:

─ Objects are positioned with 3 floating-point coordinates

─ CSS, WebGL

 Each type of spatial organization defines

• The local coordinate systems for each type of object

─ Where the (0,0,0)-point is

─ Used for positioning, rotation, scaling …

• The nesting of local coordinate systems

─ Transformation from one to another

─ E.g. CSS Box Model, SVG Transformations

Fixed Layout: Positioning

(44)

 Graphics

<path stroke="black"

d="M 100 100 L 200 200"/>

 Text

<text x="0" y="100" font-size="80“

fill="red“>Doing text</text>

Example of Local Coordinate Systems

(45)

Cyril Concolato

 Global Coordinate System:

• Origin: default top-left of the viewbox

• X-axis right-wards, Y-axis downward

 Local Coordinate Systems

• Origin: typically top-left or center of the shape

 Intermediate Coordinate Systems

• <g> elements

 Units

• No precision limit

• Many possible units from CSS: cm, px, em, …

• User unit

─ Relation to device pixels

SVG & CSS Coordinate Systems

(46)

 Initially defined in SVG 1.1

• Now moved as a separate module, jointly developed with CSS

─ http://www.w3.org/TR/css3-transforms/

─ Also applicable to HTML elements

 Basic 2D Concepts

• Representation of an affine transformation of 2D coordinates using a 3x3 matrix

• Matrix is specified using the @transform attribute:

─ Some shortcut for scale, rotate, translate, skewX, skewY

─ Possibility to use a different origin for transformation using

@transform-origin

• Matrices can be specified at different level in the graphics tree (equivalent to matrix multiplication)

 CSS Transformations (2D/3D)

• Apply transformation matrix to an element

─ Same principle as SVG transforms

• Selected using CSS Selectors

SVG & CSS Transformations

(47)

Cyril Concolato

<svg xmlns="http://www.w3.org/2000/svg">

<style> .container { transform: translate(100px, 100px); }

</style>

<g class="container"> <rect width="100"

height="100" fill="blue" /> </g>

</svg>

CSS Transformation example

(48)

 Matrix

Transformations

• Translation

• Rotation (with different origin)

• Scale (with different origin)

• Skew

Example of transformations of LCS

(49)

Cyril Concolato

 Not a real 3D coordinate system

• Used for 3D effects (cover flow, …)

 Using the @perspective and @perspective-origin attribute

CSS 3D Transforms

(50)

 Contour-based representation

• A shape is defined by a contour

─ Can be filled with only one “paint”

─ Can be stroked with only one “paint”

 Other representations

• Planar-maps (Flash SWF format)

─ A shape is defined as a list of curves with 3 “paints”

• on the right, on the left, on the curve

• Advanced gradients (meshes, diffusion curves)

Types of Vector Graphics Primitives

(51)

Cyril Concolato

Contour-based representation of vector graphics, transformations and grouping

Need to position each shape individually

(52)

 Graphical primitives

• <rect>

─ Anchored on its top left corner (x, y)

─ Possible rounded corners (rx, ry)

• <circle>

• <ellipse>

─ Anchored on its center

• Point/Coordinate-based primitives

─ <line>, <polygon>, <polyline>

─ <path>: complex curves

Basic shapes

(53)

Cyril Concolato

SVG Curves

 Line segments

 Bézier Curves

• Cubic (C)

• Cubic Symetrical (S)

• Quadratic (Q)

• Quadratic Symetrical (T)

 Catmull-Rom Curves (SVG 2.0)

• Dotty.svg (Doug Schepers)

 …

(54)

 Start-point, end-point + arc parameter

 To be extended in SVG 2.0

• Harmonization with Canvas

SVG Arcs

(55)

Cyril Concolato

SVG Path

 Element used to describe complex graphics

• <path>

• Drawing commands are described using the « d » attribute

─ List of 2D points

separated by drawing commands

─ Use of relative or absolute user units

(56)

 SVG uses specific elements for text

• Different from HTML

─ No flowing text

─ No paragraph

• Graphical primitives as others

─ Can be filled, stroked, …

• With additional CSS text properties

─ @font-size, …

 SVG Text elements

• <text>

─ Renders characters on a single line

• <tspan>

─ Used to change the style of some characters on a line

• <tref>

─ Reuse existing text content across <text> elements

• <textPath>

─ Draws a text along a path (ex: legend on a river)

• SVG Tiny 1.2 <textArea>

Text in SVG

(57)

Cyril Concolato

 Individual graphical element rendering

• Drawing operations in order

─ Fill then stroke

• Or stroke then fill

─ Then markers

─ Then filters

─ Then clip

─ Then mask

• Order to be parameterized in SVG 2.0

SVG / CSS Rendering Model

(58)

 @fill

• A uniform/solid color

─ sRGB color space or ICC color profile

• Extensions in SVG 2 Color Module

─ Syntax:

• rgb(int[0-255], int[0-255], int[0-255])

• rgb([0-100]%, [0-100]%, [0-100]%)

• Color keywords: black, white …

• A linear or radial gradient

─ Also used in CSS

─ Extensions to Gradient Meshes in SVG 2

• A pattern

─ Extensions to hatches in SVG 2

 @fill-opacity

• Transparency used for alpha-blending

 @fill-rule

• When a graphical primitive self-intersects

Filling Properties

Linear gradient

Radial gradient

Pattern

(59)

Cyril Concolato

 @stroke

• Same syntax/values as @fill including gradients, pattern, …

 @stroke-opacity

• Same as fill-opacity but only on the stroke

─ Can be combined

 @stroke-width

• Centered around the

mathematical/geometrical outline

• New attribute in SVG 2.0 to control the position of the stroke

 @stroke-dasharray

 @stroke-dashoffset

 @stroke-linejoin

 @stroke-linecap

Stroking Properties

(60)

Advanced Stroking (proposed to SVG 2.0)

 Power Strokes in Inkscape

• Variable stroke width

• calligraphy

(61)

Cyril Concolato

 Draws a symbol at some specific locations of a given graphical primitive

• Initially for point-based graphical primitives (path, line, polygon

…)

─ To be extended to all primitives (rect, circle, …) in SVG 2.0

• Initially at specific positions: start, end, middle

─ To be extended to any position (%)

SVG Markers

(62)

Graphical Effects on the Web

 Clipping

 Masking

 Filters

 Shaders

(63)

Cyril Concolato

 Initially defined in SVG 1.1

• Now moved as a separate module, jointly developed with CSS

─ http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html

─ Also applicable to HTML elements

 Goals

• Clipping: cut parts of graphics or images out

• Masking: progressively show parts of graphics or images

 @clip-path

 @clip-rule

 @mask

 @opacity

SVG & CSS Clipping and Masking

(64)

Clipping and Masking examples

object luminance mask

Masked object

(65)

Cyril Concolato

Clipping and Masking examples (2)

<clipPath> containing three graphic elements and applied to an

<image> (on top of a rectangle)

http://srufaculty.sru.edu/david.dailey/svg/newstuff/clipPath1.svg

Application of a radial gradient <mask> to an <image>

</radialGradient>

</mask>

<image xlink:href='p0.jpg' y="10%" x="26%" width="50%" height="65%"

mask="url(#Ma)"/>

</clipPath>

(66)

 Initially defined in SVG 1.1

• Now moved as a separate module, jointly developed with CSS

─ https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

─ Applicable to HTML elements

 Goal

• Advanced manipulations of graphics at the pixel level after/during rasterizing (Photoshop-like effects)

• Ex: Blur, Color manipulations, image manipulations …

 Elements

• <filter> containing a sequence of filter primitives:

─ ‘feBlend’, ‘feFlood’, ‘feColorMatrix’, ‘feComponentTransfer’,‘feCompo site’, ‘feConvolveMatrix’, ‘feCustom’, ‘feDiffuseLighting’,‘feDisplaceme ntMap’, ‘feDropShadow’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’,‘feMor phology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’, ‘feTurbulence’,‘feUns harpMask’

 Attribute

• @enable-background, @filter, @flood-color, @flood-opacity,

@lighting-color

SVG & CSS Filters

(67)

Cyril Concolato

Filter Example (1)

<filter id="A">

<feGaussianBlur stdDeviation="10"/>

</filter>

<rect x="42%" y="10%"

width="16%" height="25%"

fill="white"

filter="url(#A)" />

(68)

Filter examples

<filter id="edge">

<feConvolveMatrix order="3"

kernelMatrix="-1 -1 -1 -1 7 -1 -1 -1 -1 " />

</filter>

<image x="465" xlink:href="p17.jpg"

width="150" height="175"

filter="url(#edge)" />

(69)

Cyril Concolato

SVG & CSS Shaders

 Extensions of Filters with a Custom Filter:

feCustom

• Transformation of input (graphics, text, images, videos) data into a texture

• Creation of a grid on the texture

 Vertex Shaders

• Deformation of the grid according to a « program »

 Pixel Shaders

• Manipulation of the pixels in the texture according to a

« program »

 Program written in specific shader programming language (C-like)

• GLSL

(70)

SVG/CSS Shaders Illustration

http://www.adobe.com/devnet/html5/articles/css-shaders.html

(71)

Cyril Concolato

 Painter’s algorithm:

• Elements are drawn in document order using simple alpha-blending

─ Possibility to change the element order using z-index (CSS, SVG)

• Extended with

─ SVG Vector Effects

─ CSS/SVG Compositing and Blending

Rendering of Groups

(72)

 Initially envisaged only for SVG 2.0

• Now jointly developed with CSS

─ https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html

─ Also applicable to HTML elements

 Goal

• Enhance the way objects are grouped, drawn on top of each other

─ Similar to Illustrator or PDF capabilities (blending modes, knockout, isolation)

 Attributes

• @mix-composite, @mix-blending, @isolation, @knock-out

SVG & CSS Compositing and Blending

(73)

Cyril Concolato

Compositing

Using Porter-Duff Operators

(presence of alpha != 0)

(74)

Blending

Blending modes (PDF, Illustrator)

normal multiply screen overlay darken difference

(75)

Cyril Concolato

 Under consideration for SVG 2.0

• http://www.w3.org/TR/2004/WD-SVG12-20041027/vectoreffects.html

• http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffects Primer.html