CSS(3) verstehen

und anwenden

Alexej SchneiderAPEX Connect 2017

Facts & Figures

Mittelständischer IT-Dienstleister

Technologie-orientiert

Branchen-unabhängig

Hauptsitz

Ratingen240

Beschäftigte

Gründung

1994

Niederlassung

Frankfurt am MainAusbildungs-

betrieb

Inhabergeführt

Zertifizierter

Partner von

Oracle,

Microsoft

und SAP

28 Mio. Euro

Umsatz

Managing Technology

Bachelor Angewandte Informatik

Wirtschaftsinformatik

Oracle APEX Berater

APEX (SQL/PLSQL)

Front-End (HTML/CSS/JS)

UI/UX

Vorher tätig in

Design und Entwicklung im Web

MotivationBasicsCSS für „Fortgeschrittene“CSS3

Kleine Änderungen

Neue UI-Elemente

Corporate Design

Redesign (Oder alles neu)

Spezielle Anforderungen

Responsive

User Experience

APEX im Internet

…Für den WOW-Effekt…

5

Wozu CSS?

Motivation

Maximilian Stahl

Till Albert

MotivationBasicsCSS für „Fortgeschrittene“CSS3

HyperText Markup Language

Definiert die Struktur

Die Bausteine von Webanwendungen

Cascading Style Sheets

Definiert die Darstellung

Wie sollen die Bausteine aussehen

HTML != CSS

Basics

Klare Trennung zwischen Struktur und Darstellung!

Element <div> div {…style…}

Klasse <div class=”doag”> .doag {…style…}

ID <div id=”doag”> #doag{…style…}

HTML & CSS

Basics

HTML CSS

13

HTML DOM

Basics

.box {width: 400px; height: 400px;}

CSS/Syntax

Basics

property value property valueselector

HTML:

<div class=„box“>CSS is awesome</div>

CSS:

.box {

width: 400px;

height: 400px;

text-transform: uppercase;

border: 10px #000000 solid;

font-family: helvetica;

font-weight: bold;

font-size: 155px;

line-height: 132px;

}

HTML + CSS

CSS Basics

MotivationBasicsCSS für „Fortgeschrittene“CSS3

Attributselektoren

Selektoren

[a] Alle Elemente die das Attribut besitzen

[a=‘v‘] Alle Elemente mit dem exakten Attribut/Wert

[a~=‘v‘] Attribute die eine Zeichenkette enthalten (Durch Leerzeichen getrennt)

[a|=‘v‘] Attribute die mit einer Zeichenkette anfangen (Durch Bindestrich getrennt)

[a^=‘v‘] Attribute die mit einer Zeichenkette anfangen

[a$=‘v‘] Attribute die mit einer Zeichenkette enden

[a*=‘v‘] Attribute die eine Zeichenfolge beinhalten

!Mega hilfreich im APEX-Umfeld! +jQuery

Beispiele:

[HEADERS=“status“](In Reports) [data-series=“Element1“](Charting)

[href$=“.pdf“](Dateien) [disabled](UI-Elemente)

[class*=“mobile“]

!Essenziell!

Nachfahrenselektor E F {…}

Kindselektor E > F {…}

Selektor-Liste E , F {…}

z.B.: #meineRegion .t-Region-body,

#meineAndereRegion > .t-Region-body {

…style…

}

(Auch nett)

Nachbarselektor E + F {…}

Geschwisterselektor E ~ F {…}

Kombinatoren

Selektoren

strukturelle Pseudoklassen

:root

:empty

:first-child

:last-child

:nth-child()

:nth-last-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:nth-last-of-type()

:only-of-type

Pseudoklassen & Elemente

Selektoren

dynamische Pseudoklassen

:any-link, :link, :visited

:hover, :active, :focus

:target

:disabled, :enabled, :checked

:valid, :invalid

:in-range, :out-of-range

Pseudoelemente

::first-line

::first-letter

::before, ::after

::backdrop

::selection

[Quelle: wiki.selfhtml.org]

Oder: Aka warum springt mein Selektor nicht an? (Negativbeispiel)

Cascading Order

!important...letzter Ausweg!?

Element < .class < #id < inline-style < !important

Pauschal gesagt

Cascading Order

Möglichst meiden

* A=0, B=0, C=0, D=0 Spezifität 0 0 0 0

h1 A=0, B=0, C=0, D=1 Spezifität 0 0 0 1

ul li A=0, B=0, C=0, D=2 Spezifität 0 0 0 2

a::after A=0, B=0, C=0, D=2 Spezifität 0 0 0 2

p:first-child A=0, B=0, C=1, D=1 Spezifität 0 0 1 1

a:not([href]) A=0, B=0, C=1, D=1 Spezifität 0 0 1 1

ul.nav [href] A=0, B=0, C=2, D=1 Spezifität 0 0 2 1

#author A=0, B=1, C=0, D=0 Spezifität 0 1 0 0

#editor p A=0, B=1, C=0, D=1 Spezifität 0 1 0 1

style="" A=1, B=0, C=0, D=0 Spezifität 1 0 0 0

Im Detail

Cascading Order

!important…selten notwendig

Chrome Developer Tools

Box Model

Beispiel: CSS is awesome

width

height

content

margin: Außenabstand

border: Rahmen

padding: Innenabstand

content: Inhalt

Box Model

display: block

Beispiel: <div>

Erscheint in neuer Zeile

Breitet sich auf 100% aus

„Der“ Baustein

display: inline

Beispiel: <span>

Erscheint nicht in neuer Zeile

Breitet sich nicht auf 100% aus

Hauptsächlich für Textformatierung

weitere hilfreiche: none, list-item, flex, inline-block

CSS-Property: display

PL/SQL-Region

HTML-DOM mit CSS-Klassen

CSS beinhaltet

Layout

Abstände (Box Model)

Textformatierung

Farben

CSS3

transform: rotate (-90deg)

Konferenzplaner

Layout Beispiel

display: inline-block

display: block

display: block

display: block

->block (float: left)

static

Dafault

relative

fixed

absolute

CSS-Property: position

Ich bin default

Ich auch

Ich bin relative (left: 100px)

Ich bin „fixed“ und behalte meine Position

beim scrollen (top: 0; right: 0)

Ich bin default Ich bin absolute

(top: 0; right: 0)

Desktop

Media Queries

=> Hack zur Zentrierung

Mobile

Media Queries

12 Grid Layout

Media Queries

Bootstrap (APEX identisch)

Gruppieren

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

.class1 {…}

.class2 {…}

#id1 > .class1 {…}

}

Abhängig vom Medium

Ein-/Ausblenden von Elementen

Schriftgröße anpassen

Padding/Margin/Width ändern

APEX-Grids manipulieren

Unterschiedliche Ausgabemedien steuern

Media Queries

@media only screen and (max-width: 600px) {.bewertung-region .t-AVPList-label {

width: 40%;}

}

MotivationBasicsCSS für „Fortgeschrittene“CSS3

Zahlreiche neue „Features“

Unterteilt in Module

Unterschiedlicher Entwicklungsstand

Und Browserunterstützung

Candidate Recommendation (CR)

Nicht alle brauchen vendor perfixes

z.B.:

-webkit- (Chrome, Safari)

-moz- (Firefox)

-o- (Old versions of Opera)

-ms- (Internet Explorer)

Allgemein

CSS3

Can I use __________________ ?

[Quelle: caniuse.com]

Wir kennen jetzt schon welche!

CSS3

Aufbau:

.klasse {

transition: [transition-property]

[transition-duration]

[transition-timing-function]

[transition-delay];

}

Beispiel:

.klasse {

transition: background-color 0.5s ease;

background-color: white;

}

. klasse:hover { background-color: red; }

Animationen ohne viel Aufwand (Farben/Größen/Positionen)

Transition

[Quelle: http://www.cssmatic.com/box-shadow]

Generator

Border

[Quelle: http://www.cssmatic.com/box-shadow]

Generator

Shadow

[Quelle: http://css3gen.com/text-shadow/]

Generator

Text-Shadow

[Quelle: http://www.colorzilla.com/gradient-editor/]

Generator

Farbverlauf (Gradient)

Generator

Filter

[Quelle: http://www.cssreflex.com/css-generators/filter/]

2D/3D Transforms

Skalieren

Drehen

„Translate“ (Bewegen)

„Skew“ (Schräglage)

Animations

Komplexe Animationen gestalten

Mit Keyframes

Flexbox

Neue Layoutingmethode

“CSS-Hacks“ nicht notwendig

Webfonts

Fonts benutzen, die beim Endanwender nicht installiert sind

Farben

RGBA

HSL

HSLA

Transparenz

…und noch viel mehr…

Kleine Aufzählung

Weitere Features

Feedback!

bit.ly/2oUmypR

Ich danke Ihnen!(Und hoffe, dass Sie was mitnehmen können!)

Vorträge der MT AG

Donnerstag 11. Mai

15.30 Uhr | Music Hall 2

Let your Clients do the work

Steven Grzbielok

15:30 Uhr | Soul

Ein Blick unter die Haube: JavaScript in APEX

Davide Groppuso