CSS 3 - EIN EINSTIEG IN DEN "NEUEN" WEBSTANDARD - Vortrag zum Developer Day 2013 LENNART SCHLEGGE

Vortrag zum Developer Day 2013

CSS 3 – EIN EINSTIEG IN DEN
„NEUEN“ WEBSTANDARD
LENNART SCHLEGGE

                                 1

WARUM STEHT DAS „NEUEN“ IN
     ANFÜHRUNGSZEICHEN?

     … weil CSS 3 schon seit dem Jahr 200 in der Entwicklung ist und noch
     immer nicht komplett verabschiedet wurde.

     •       CSS ist streng genommen kein richtiger Standard
               Das W3C (keine zwischenstaatlich anerkannte Organisation)
                 spricht nur Empfehlungen aus
               Diese Empfehlungen werden von den Browserherstellern
                 implementiert, mittlerweile sogar von Microsoft 

04.10.2013                         LMIS AG - http://www.LMIS.de             2

CSS 3 IST MODULAR AUFGEBAUT

     •       CSS 3 ist keine einzige Spezifikation.
               Dadurch können Browserhersteller einzelne Module
                 implementieren.
               Außerdem können Module schneller fertiggestellt werden.
               Statut der Module:
                    Working Draft (WD)                   - Arbeitsentwurf
                    Las Call (LC)                        - Letzter Aufruf
                    Candidate Recommandation (CR)        - Veröffentlichungsvorschlag
                    Proposed Recommandation (PR)         - Geplante Veröffentlichung
                    W3C Recommandation (REC)             - Standard

04.10.2013                           LMIS AG - http://www.LMIS.de                        3

… EIN PAAR BEISPIELE

     •       CSS Color – W3C Recommendation
     •       Selectors – W3C Recommendation
     •       CSS Background & Borders – Candidate Recommendation
     •       Media Queries – Candidate Recommendation
     •       CSS Fonts – Candidate Recommendation
     •       CSS Transitions – Working Draft

04.10.2013                      LMIS AG - http://www.LMIS.de       4

HERSTELLERSPEZIFISCHE PRÄFIXE

     •       CSS 3 befindet sich noch in der Entwicklung
     •       Browserhersteller nutzen Präfixe für Eigenschaften, für die noch
             keine endgültige Empfehlung ausgesprochen wurde.
               -moz-             Firefox
               -webkit-          Safari, Chrome
               -ms-              IE
               z. B.

04.10.2013                          LMIS AG - http://www.LMIS.de                5

FARBEN UND TRANSPARENZ
                  CSS COLORS (REC)

04.10.2013          LMIS AG - http://www.LMIS.de   6

FARBEN & TRANSPARENZ

     •       Bisher wurden Farben in hexadezimalen RGB-Werten ausgedrückt,
             z. B. mit #ED7D31
     •       CSS 3 bietet mit den Schlüsselwörtern …
               rgb (red, green, blue)
               rgba (red, green, blue, alpha)
               hsl (hue, saturation, lightness)
               hsla (hue, saturation, lightness, alpha)
                 [hue = Farbton, saturation = Sättigung, lightness = Helligkeit, alpha = Deckkraft]
             … neue Möglichkeiten, um Farben auszudrücken.

04.10.2013                                 LMIS AG - http://www.LMIS.de                               7

FARBEN & TRANSPARENZ

04.10.2013       LMIS AG - http://www.LMIS.de   8

LÖSUNGEN FÜR ÄLTERE BROWSER

     •       Nicht-transparente Farben als Fallback zuerst notieren

     •       PNG-Bild als Fallback benutzen
     •       Filter-Eigenschaft des IEs nutzen

04.10.2013                           LMIS AG - http://www.LMIS.de     9

SELEKTOREN
             SELECTORS (REC)

04.10.2013     LMIS AG - http://www.LMIS.de   10

ATTRIBUTIONSSELEKTOREN

     •       CSS 2.1

     •       CSS 3

04.10.2013             LMIS AG - http://www.LMIS.de   11

ATTRIBUTIONSSELEKTOREN

04.10.2013       LMIS AG - http://www.LMIS.de   12

STRUKTURELLE PSEUDOKLASSEN

     •       Dienen dazu, das „soundsovielte“ Kindelement auszuwählen, z. B.

04.10.2013                          LMIS AG - http://www.LMIS.de               13

STRUKTURELLE PSEUDOKLASSEN

04.10.2013       LMIS AG - http://www.LMIS.de   14

STRUKTURELLE PSEUDOKLASSEN

     •       Weitere strukturelle Pseudoklassen:
                  :first-child
                  :last-child
                  :only-child
     •       Das „sodundsovielte“ Element seiner Art:
                  :nth-of-type()
                  :first-of-type
                  :last-of-type
                  :only-of-type
     •       Besondere Pseudoklassen:
                  :empty           /* leere Elemente */
                  :not ()          /* verneint den in den      Klammern
                                   angegebenen Ausdruck*/
                  :target

04.10.2013                      LMIS AG - http://www.LMIS.de              15

STRUKTURELLE PSEUDOKLASSEN

04.10.2013       LMIS AG - http://www.LMIS.de   16

PSEUDOKLASSEN FÜR FORMULARELEMENTE

     •       :enabled & :disabled

     •       :checked

04.10.2013                    LMIS AG - http://www.LMIS.de   17

KOMBINATOREN
     •       Kombinatoren bestehen aus mehreren einfachen Selektoren, z. B.

     •       Neu in CSS 3 ist der allgemeine Geschwisterkombinator:

04.10.2013                         LMIS AG - http://www.LMIS.de               18

TYPOGRAFIE
             CSS FONTS (LC)

04.10.2013    LMIS AG - http://www.LMIS.de   19

TYPOGRAFIE

     •       Bisher war man auf Standardschriften wie z. B. Arial oder Helvetica
             beschränkt
     •       Mit Webfonts bietet CSS 3 eine Technik, um neue Schriftarten
             einzubinden, die heute schon browserübergreifend solide
             funktioniert.
     •       Schriftarten können auf Servern bereitgestellt und automatisch
             heruntergeladen werden

04.10.2013                           LMIS AG - http://www.LMIS.de                  20

SCHRIFTFORMATE

     • Derzeit gibt es folgende Schriftformate:
         TrueType/OpenType
         EOT (Embedded Open Type)
         SVG-Fonts
         WOFF (Web Open Font Format)

     Langfristig wird sich wohl WOFF durchsetzen, da dieses Schriftformat
     auch vom W3C entwickelt wird und derzeit als einziges (neben TTF)
     von allen Browsern unterstützt wird.

04.10.2013                     LMIS AG - http://www.LMIS.de                 21

LIZENZEN

     • Bei der Nutzung von Schriftarten ist es wichtig, darauf zu
       achten, dass keine Lizenzen verletzt werden
     • Im Web gibt es verschiedene Anbieter von kostenlosen
       Schriftarten, z. B.
         Google Web Fonts – http://www.google.com/webfonts
         Font Squirrel – http://www.fontsquirrel. om

04.10.2013                  LMIS AG - http://www.LMIS.de            22

TYPOGRAFIE

     • Textschatten, z. B.
                text-shadow: 0px 4px 5px #222;
                                      1.          2.            3.   4.

             1. Horizontaler Offset
             2. Vertikaler Offset
             3. Verschwommenheit
             4. Farbe

04.10.2013                       LMIS AG - http://www.LMIS.de             23

TYPOGRAFIE

04.10.2013        LMIS AG - http://www.LMIS.de   24

RAHMEN & HINTERGRÜNDE
             CSS BACKGROUNDS & BORDERS (CR)

04.10.2013             LMIS AG - http://www.LMIS.de   25

ABGERUNDETE ECKEN

     • border-radius:   [links-oben]                      [rechts-oben]
                         [rechts-unten]                   [links-unten]

             .rounded {
                  border-radius: 10px 10px 5px 5px;
             }

             .asym-rounded {
                  border-radius: 10px/15px;
             }

04.10.2013                 LMIS AG - http://www.LMIS.de                   26

HINTERGRÜNDE

     • Einem Element mehrere Hintergrundbilder zuweisen:
             background-image: url(bild1.png), url (bild2.png);

     • Position der Hintergründe festlegen:
             background-position: 20px 20px 100px 100px;

     • Bereich für den Hintergrund definieren:
             background-clip: content-box;
             /* „border-box“, „padding-box“,                „context-box“   */

04.10.2013                   LMIS AG - http://www.LMIS.de                        27

FARBVERLÄUFE

     •       Linearer Farbverlauf:
                 background-image: linear-gradient (left top, white, blue);
                 /* linearer Farbverlauf von weiß nach blau, von oben links
                 nach rechts unten */

                 background-image: linear-gradient (20deg, white, green 60%);
                 /* die Endfarbe grün wird nach 60% des Verlaufs angezeigt
                  (left = 0deg) */

     •       Radialer Farbverlauf
                 background-image: radial-gradient (blue, black);

     Mit Farbverläufen lassen sich sogar ganze Muster erzeugen.

04.10.2013                           LMIS AG - http://www.LMIS.de               28

FARBVERLÄUFE

04.10.2013      LMIS AG - http://www.LMIS.de   29

TRANSFORMATIONEN
             CSS 2D TRANSFORMATION (WD)

04.10.2013           LMIS AG - http://www.LMIS.de   30

TRANSFORMATIONEN
     • Mit dem Schlüsselwort transform können Elemente
       gedreht, skaliert, verschoben undverzerrt werden.
         drehen (rotate)

              skalieren (scale)

04.10.2013                         LMIS AG - http://www.LMIS.de   31

TRANSFORMATIONEN
              verzerren (skew)

              verschieben (translate)

04.10.2013                        LMIS AG - http://www.LMIS.de   32

TRANSFORMATIONEN

04.10.2013      LMIS AG - http://www.LMIS.de   33

ÜBERGÄNGE
             CSS TRANSITIONS (WD)

04.10.2013       LMIS AG - http://www.LMIS.de   34

ÜBERGÄNGE
     • Das     Schlüsselwort  transition        erlaubt   flüssige
       Übergänge von CSS-Defitinitionen
     • z. B. kann ein Farbwechsel beim „Hovern“ eines Links flüssig
       gestaltet werden

              all besagt, dass die Transition auf alle Eigenschaften wirken soll
                2s besagt, dass der Übergang zwei Sekunden lang dauern soll
                ease beschreibt die Art, wie der Übergang verlaufen soll.

04.10.2013                           LMIS AG - http://www.LMIS.de                   35

ÜBERGÄNGE

04.10.2013       LMIS AG - http://www.LMIS.de   36

MEDIA QUERIES
                       (PR)

04.10.2013     LMIS AG - http://www.LMIS.de   37

MEDIA QUERIES
     • Media Queries ermöglichen es, unterschiedliche CSS-
       Definitionen für verschiedene Ausgabemedien festzulegen.
         z. B. für Drucker, Smartphones oder verschiedene
          Bildschirmformate/-größen
     • So kann man für jeden Ausgabemedium eine vernünftige
       Darstellung der Webseite/-Anwendung sicherstellen.
     • Media Queries werden mit dem Schlüsselwort @media
       definiert

04.10.2013                 LMIS AG - http://www.LMIS.de           38

MEDIA QUERIES: AUFRUFBARE EIGENSCHAFTEN
     • width, height – Breite und Höhe des Viewposts
     • device-width, device-height – Breite und Höhe des
       Ausgabegeräts
     • orientation- portrait oder landscape
     • color – Anzahl der Bits pro Farbe des Ausgabegeräts
     • resolution – Dichte der Pixel, z. B. min-resolution: 300dpi

04.10.2013                  LMIS AG - http://www.LMIS.de             39

MEDIA QUERIES: AUFRUFBARE EIGENSCHAFTEN

04.10.2013          LMIS AG - http://www.LMIS.de   40

WEITERE CSS 3 MODULE
     •       CSS 3D Transformation (WD)
     •       CSS Animation (WD)
     •       CSS Multi-column Layout (CR)
     •       CSS Flexible Box Layout (WD)

04.10.2013                       LMIS AG - http://www.LMIS.de   41

CSS 3 HEUTE SCHON EINSETZEN?
     JA, DENN …

     • viele Spezifikationen wurden schon verabschiedet
     • die meisten Implementierungen funktionieren browser-
       übergreifend solide
     • CSS 3 muss sowieso nicht immer komplett genutzt werden
       (die Nutzung von einzelnen Modulen oder Features ist
       möglich)
     • die Nutzung von CSS 3 Features hat meistens keinen
       negativen Einfluss auf die Nutzbarkeit der Website in
       älteren Browsern.

04.10.2013                LMIS AG - http://www.LMIS.de          42

FAZIT
     CSS 3 ist …
     • einfacher
     • perfomanter
     • benutzerfreundlicher
     • barriereärmer
     • besser für Suchmaschinen.

                 CSS 3 hat Zukunft!

04.10.2013                 LMIS AG - http://www.LMIS.de   43

NÜTZLICHE LINKS
     •       http://www.w3.org/Style/CSS/current-work (W3C)
     •       http://www.css3.info (css3.info)
     •       http://www.smashingmagazine.com (Smashing Magazine)
     •       http://modernizr.com (Modernizr)
     •       http://lesscss.org (less)

04.10.2013                      LMIS AG - http://www.LMIS.de       44

Vielen Dank für Ihre Aufmerksamkeit!
LMIS AG

Parkstraße 40
49080 Osnabrück

www.LMIS.de
+49 (541) 580 5683-0
info@LMIS.de