Tài liệu Einstieg in CSS- P12 pptx

— 342 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... Civaraxter Enceding h

Trang 1

30 CSS-Code optimieren

ich die Erfahrung gemacht, dass Sie selbst dann manch ntitzliche Erkenntnisse gewinnen und einiges zum Thema Optimierung lernen können

Ich habe eine ganze Reihe sogenannter und tatsachlicher CSS- Optimierungstools fiir Sie getestet Nachfolgend meine Favoriten

CSStidy Formatierer und Optimierer CSS Formatierer und Optimierer basiert auf dem bekannten Pro- gramm CSStidy Dieses deutschsprachige Online-Tool macht sei- nen Job ziemlich gut Sie finden vielfaltige Optionen vor, die Ein- stellungen anzupassen Das Ergebnis ist, soweit ich es getestet

habe, perfekt

CSS Formatierer Und Optimierer ‹ :‹.- : ›› ›

Sprache: English Deutsch Franch Chinese Wichtiger Hnweis: Der CSS Code salte wohigeformt sain, Der CSS Code wird nicht auf Giiltigke® iibarpriift Um scherzugeher

dass dem Code vebde ist, berutze den W3C Validierungsservice,

pˆ`»se22sssvssss 3 ml ^ssesssssesasaA ni eee NHA ni:

/* C45 1oxHauia Webhowe Basiswodell */ F Standard (Kompromiss zwischon Lesbarket und GraBe)

margin: Vem Ven U.Sém Ven: Eigerse aren sortieren

eer Shorthards optimiaran | Sichare Ciptimienunqen &

border-bottom: ipx dashed JO04A7F; MM] font-weight komprimiaren

33 von URL: B Keine © Heinbuchstabon © CroBbuchstabon

CSS Formatierer und CD yngiltige Eigenschaften entfernen CSS?! J

in ein neues Fenster geschrieben

— 342

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 2

30.3 Tools zur Optimierung von CSS-Code

an | ø :3 là 2 @ Lo check oss |g) Peromet css FR other Toss »

wt margin; Opx

padding: Opx;

border: Opx;

}

hi, h2, h3, h4, h5, h6 { font-fawily: "Century Gothic", sans-serif;

wargin: Oem Oem 0.Sem Oem:

Inderk ‘sath:

(lPreserve origina whtesnaces

[Remove exbra spaces [) Remove comments

[Remove extra semicolon

[Remove bank Ines

2 |

Gs specaleed CoS edher, We recommend Racid C55 Edtor,

Trang 3

Đá, „UP ee eh bree SOT FT oa ee PF

a w3c develops many more

should run on all your web ware tools, soa h eW3C

idator - Also known as the 1 Tu

ia and XHTML, SVG or at perlinks) ina

An interesting companion

cm Link Che Lên to find broken links,

thịc toolbox is the Matrs°

Lassen Sie sich bei der Fehlersuche helfen!

Sie werden lernen,

>» welche Validatoren das W3C anbietet,

> welche Tools sonst noch empfohlen werden und

> wie Sie die Web Developer Extension anwenden

Trang 4

31 CSS-Code validieren und Fehlersuche

Es erstaunt mich immer wieder, dass die Validierung von HTML- und CSS-Code offenbar bei Webentwicklern nicht allzu beliebt scheint Sie sollten es von Anfang an besser machen und sich bei dieser wichti- gen Aufgabe vom W3C helfen lassen

Priifen Sie die Giltigkeit Ihres Codes unbedingt, bevor Sie sich auf die Suche nach Fehlern machen - sie kénnen sich voraussichtlich einiges an Mthe und Kopfzerbrechen ersparen Die Validatoren des W3C sind nattirlich die Autoritat im Hinblick auf giiltigen Code und liefern erstaunlich prazise Ergebnisse, was die Art der Fehler betrifft

31.1 W3C-Validatoren

Tin haupten Sie beispielsweise im head Ihrer HTML-Datei, Sie wurden

genau darauf hin tberpriift

Nachfolgend eine kurze Beschreibung der W3C-Validatoren

und wie Sie diese einsetzen

Der W3C-HTML-Validator

unter dem angefiihrten Namen

Yah9zer ty ƯỚI Vatutate oy ie Vetoes = Valigute by 941 Input Validate by URI

wdee 6 erent mine

+More Optiont!

Civaraxter Enceding hed mere & Come masng

Abbildung 31 1 > © Ust Messages Sequertty O Group Error mentage by tye Die Benutzeroberflache des ona O curse tanapetn XT, Tey

W 3C-HTML-Validators ra tena O vanaate error pages

— 346

Trang 5

311 W3C-Validatoren

Der W3C-HTML-Validator bietet lhnen drei Optionen an, um lhren HTML-Code zu ủberprủfen:

> Eingabe der genauen URI einer Seite, die online ist

Result: | Failed validabon, 77 Errors

Docipa' XHTML 10 Transitional (detect nutsmahent B Root Element: jini W3C-HTML-Validator: 4 Abbildung 31.2 = „3

Anzeige von Fehlern

Root Namespace (ip (wry ve orgs 199 ore

Sie erhalten eine Auflistung samtlicher Fehler (in Bezug auf die

a Ea CaN el Petco Ue OTe Cll ee ee Bete

Validation Output: 77 Errors , Line 1, Column 62 no system id specified

«PE Ntel PUBLIC "= /1RC//DTD KHTML 1,0 Tramaa tional //er" >

Your documes inckales a DOCTYPE declaraton with a puble center (e.g ˆ-4W/3C//DTD XHTML 10 9U/EN)

bul (© System WentHer (e.g “Nip vs 2@*0/TR/Ilú/0/1/DTOVSPPM1<44010) Ths ie authorized in HTML

(based on SGML), but net in ML based larquages

Hyde are Ung & atandard TMTML Aocumedt tyne 2 i¢ recommended to ute avery one of tha DOCTYDE dechwations tom the wcoenmranded fet on the WIC QA Websee

ETA 1884+* (6f4f/-(1* cô9/16f(†4"bÄeY€L4/TẠW(2JPSXTC@3g7bV1EU70v1PQE/H4C¿s> /3

4 Abbildung 31.3 W3C-HTML-Validator: —

Anzeige der Fehler samt

Fundstelle im Detail

You beve used the atthibute muned shove in your docurert, bu fhe docurnent type you are ueeg dows ret sugeert

that attebute for thes element This exor is ten caused by ncomect use of the “Stect” document type with 3 document tha uses frames (eg you must use the "Trnetiona” docurrert type to get fhe “target” atinibute), or by

ueing vendor propretiry extersions wich ae “marginbeight” five sý Uewally fred by using CSS to acteeve the

downed efect instead)

347: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 6

Das sieht dann so aus:

Markup Validation Service

Jump To:

This Page Is Valid XHTML 1.0 Strict!

Resull Passed validation

Root Element htm!

Sie diirfen lhre gũltige Website dann sogar mit kleinen Icons

schmiicken, welche auf die Validitat Ihres Codes hinweisen Diese

Icons werden mit der Ergebnisseite des W3C Markup Validators verlinkt, sodass interessierte Besucher das Resultat der Priifung sehen können

Und das sieht so aus:

The document located at <tip were essboxmania convvebungen/Labung Ol/ueoungOla huni was checked

and fousd to be valid HTM 1.0 Suict This means thet the resource in question demified itsef as “XHTML 1.0 Strict” and hetwe sutcesstully performed a formal validation using an SGML or XML Parser (cependng onthe markup language used)

“valid Tean(s) on your Web page

To show your readers that you have taken the cere to create an interoperable Web page, you may display ths ICON On any Page thatvalidates Here is the HTML you could use to add thes icon to your Web page

x « Wit tă head "berp: // val idatee.w) eng check Muri *eet ins

” 1 9 hing // mm 52 sng/fsene/val Lâ~syym) O°

đt) v3 TYỚNG | 0 #es(s®* Ra ghe - /

dd»

i” Go heed? "beep //val Lẩ*st, we) eng check Suri *endenes “re ing

Wy s1 99 long /2m s9) sxa/fesens/val Lâ¬sexeml kế~§]se*

A shenrtel ed ERTL ( 0 %62(/6* hay gtC?9?(* vi **tĨ* (34/4

A tull ist of icons, wath links 10 altemate formats and colors, is available’ fyou tke you can dovnload a copy of the

Trang 7

31.1 W3C-Validatoren

Der W3C-CSS -Validator

Ganz ahnlich funktioniert der W3C-CSS-Validator, weshalb ich

hier nur das erste Eingabefenster als Screenshot zeige Sie sollten die Validatoren ohnehin selber ausprobieren

_ Note Ifyou want to validate your CSS ste sheet embedded in an (X)HTM document you should first check that ‘

ee OT ETNIES Ok NS ein ln ie ae ee I ook ee ale el oe MIO hae LE ee ed ee ns 7

Es gibt ein paar kleine Unterschiede beim CSS-Validator Bei ihm wird die CSS-Version, die geprtift werden soll, handisch eingestellt (es gibt ja keinen Vorspann, der diese festlegt) Au&erdem kann eingestellt werden, fiir welche Medien der Code geprtift werden

Der W3C-Link-Checker

Checkers Dieser hat zwar nichts mit der Gủltigkeit lhrer Seiten

zu tun, fehlerhafte Links sind aber fủr lhre Besucher genauso ein Ärgernis wie fehlerhafter Code

349 — Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 8

Und so sieht die Eingabemaske aus:

prep: / atdeto: wd org cnective +

O Hide redirects: © al O for directories ony

0 Don't send the Accept -Langquage header

0 Check lirked documents recursively, recursion depth:

D Save options in 4 cookie

Clack

Der Link-Checker zeigt eine genaue Analyse der sogenannten

»Broken Links« und erklart die Details

W2X |ink‹Clhiyckzr¿ lịttp{www,cr|mezzz-nelÍ- Mkoz Ít [ irrƒox đ i lñ

Response status code: 404

Response message:

Line: 181 http://www, crimezzz.net/scriptsstyles css What to do: The link Was not checked due to ro

Response status Code: (NWA)

Response message: Forbidden by robots.txt

line: 12

Wer verschiedene Tools zur Fehlersuche und Validierung seiner

Seiten lieber bei der Hand hat, der kann die Firefox Web Devel-

oper Extension installieren, die eine wahre Fundgrube bei der Ent- wicklung von fehlerfreiem und optimiertem Code ist

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

Trang 9

31.2 Firefox-Erweiterung Web Developer

31.2 Firefox-Erweiterung

Die Web Developer Extension von Chris Pederick ist auch in deut-

http://chrispederick com/work/web- developer/localization/

Die Erweiterung fiir Firefox installiert sich praktisch durch einen Klick von alleine Nach dem Neustart des Browsers ist die-

ser um eine Toolbar erweitert, welche eine Fille an Funktionen

Ti Grafik * ~@ Infor ati x Vi chỉ de , v J Hervorheb *

CSS anzeigen nh bến Eingebettete styles

Style-Informationen anzeigen Ctrl+5hift+Y Inline-Styles {im Element-Tag)

Benutzer-Stylesheet hinzufigen Verkripfte Stylesheets 4 Abbil dung 31.10 CSS bearbeiten Ctrl+Shift+F Druck-Styles Web Developer Extension

- ——— Einzehes Stylesheet » UP

> CSS: Styles deaktivieren mit vielen weiteren Optionen

> Formulare: vielfältige Darstellungsoptionen und Testfunk-

Trang 10

31 CSS-Code validieren und Fehlersuche

> Verschiedenes: private Daten ldschen, Hilfslinien anzeigen,

Lupe einblenden, Makwerkzeug, Kommentare einblenden, HTML bearbeiten usw

> Hervorheben: Frames, Uberschriften, Links, Tabellenelemente,

Block-Level-Elemente, positionierte Elemente usw

> GréBe: Fenster in verschiedenen Grdken anzeigen, Zoom usw

> Extras: Validieren von CSS, RSS, HTML, Links, Barrierefreiheit LISW

> Quelltext: verschiedene Optionen zur Anzeige

31.3 Web Development Bookmarklets

Wer nicht die gesamte Web Developer Toolbar bendtigt, kann

einzelne Funktionen als Bookmarklets in seiner Browserleiste ver-

ankern Zudem funktionieren einige dieser Bookmarklets auch im

Abbildung 31.11 ¥

Web Development Book- _ Internet Explorer

marklets von SquareFree — https://www.squarefree com/bookmarklets/webdevel htm!

9 co d6 0x0 626ed2ve9090 96s» 656Vve6l/vs°v =x

These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, and

expenment with CSS or JS without editing the actual page

{To keep Bookmarklets in oraer to use them on other web pases, drag them to pour Bookmarks Toolbar Or, install them ail at once.)

‘shall Opens a JavaScnpt Shell and allows it to access the current page Detals ø

zan style sheets| Disables all style sheets Details

zap presentational html Removes most presentational attributes and tags while leaving style sheets intact Details view style sheets| Displays inked and embedded style shoots Details ®® | &

Trang 11

31.3 Web Development Bookmarklets

Ziehen Sie einfach einen der Links in der Liste auf Ihre Lesezei-

chen-/Favoriten-Leiste oben im Browser

Hier die Highlights unter den Bookmarklets:

>

test styles: Styles testen: CSS-Regeln kénnen direkt eingegeben werden, um deren Wirkung zu testen

edit styles: CSS kann direkt geandert werden

ancestors: Alle Vorfahren eines Elements werden angezeigt, sobald sich der Cursor tiber das Element bewegt

computed styles: Eigenschaften und Anweisungen ftir Elemen-

Trang 13

Bei Browsern wurden wir manchmal

gerne auf Vielfalt verzichten

Sie werden lernen,

> wie Sie verschiedene Browserversionen testen konnen und

>» wie Capture-Services funktionieren

purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 14

32 Browserkompatibilitat testen

Auf manchen meiner Websites finde ich in der Zugriffsanalyse monat-

lich mehr als 70 (!) verschiedene Browserversionen unter verschiedenen Betriebssystemen

Ich teste Kundenprojekte von Anfang an in den unterschiedlichs- ten Browsern und Browserversionen unter verschiedenen Be- triebssystemen und entscheide dann, ob ich Unterschiede in der Darstellung korrigieren, ignorieren oder umgehen mdéchte - alles eine Frage des Aufwands

Bei meinen eigenen Projekten bin ich - das muss ich zugeben - mit dem Testen der Kompatibilitat recht nachlassig Zum anderen

betreibe ich auch Websites, die schon seit zwdlf Jahren bestehen

und deren Umbau ich immer wieder aufschiebe — mea culpa

Browsershots Dieser Service ist kostenlos und fiir private Zwecke bzw eine schnelle Priifung vdllig ausreichend Nachteil: Es werden nicht immer alle gewiinschten Browser getestet

Der Service entwickelt sich allerdings sehr rasant und vielver-

Zwei der bekanntesten Services fiir das Testen

Home Screenshots Queus Factories Search Šgne4d In 0s ellzzA Logout

[2] 8enEcho 2.0 [¥) keweasel 2.0 [v) Firefox 1.5 [¥) Navigator 9.0 É] Dillo 0.8 () Karehakase 0.2 [] Firefox 2.0 C Opera 9.23 (CO Epiphany 2.14 [] Kazehakase 0.4 [) Firefox 3.0 E] Opera 9.24

0 Epiphany 2.2 [2] Kazehakase 0.5 f1 Alock 1.0 C) Opera 9.25

Flock 0.9 0 Opera 9.25 MSIE 6.0 Seaorkey 1.1

0 Flock 1.0 O Opera 9.27 MSIE 7.0 SeaMorkey 2.)

[7] 3afarl ¿.0 [ZJ úaleon 2.0 [Z] $afarl 3.1 [Z] 0pera 3,25

ý) SeaMworkey 1.1

Solect: All, None, Linux, Windows, Mac 05, BSD, Gecko, KHTML WebKit C0 Only my own factories

Abbildung 32.1 > —— DI Dont care GIN Dont care a g

Trang 15

32 Browserkompatibilitat testen

Und so funktioniert Browsershots:

Nachdem Sie die Adresse der zu testenden Seite eingegeben

haben, konnen Sie auswahlen, welche Browser unter welchen Be-

triebssystemen gepriift werden sollen Dartiber hinaus konnen Sie auch noch die Bildschirmauflésung und die Farbtiefe angeben und festlegen, ob JavaScript und Java gepriift werden sollen

Ihre Anfrage kommt in eine Warteschleife und Sie erhalten eine Schatzung, wie lange der Test dauern wird Nach und nach trudeln dann |hre Browsershots ein

Sie sehen diese in einer Reihe von Thumbnails, beim Drtiber-

fahren mit der Maus eine etwas grobere Vorschau und bei einem Klick auf ein Thumbnail-Bild eine groke Abbildung des Screens- hots Sie haben die Méglichkeit, durch die Browsershots zu blat- tern und sich eine gezippte Datei mit allen Bildern herunterzula- den Die Screenshots bleiben einige Tage online

http://www browsershots org/

Browsercam

Dieser Service ist kostenpflichtig, hat dafiir aber auch einige professionelle Funktionen zu bieten So werden standardisierte Screenshots ausgegeben, und zwar fiir alle Browser, die angewahlt

wurden (bis zu etwa 200)

Sie haben bei Browsercam die Méglichkeit eines 24-Stunden- Testkontos, mit dem Sie die exzellenten Funktionen ausgiebig testen kénnen

Browser Capture ‘Device Capture

because and operating Bla-lbsry 6c

* Creete end shee screen Meike 5.0 shots

* Spaed up your workflow

® New Festung: Irterret

@ Crante and share screen shoes

@ Avaloble weh

Explerer Bera 1! Plus plans

+ oming saan hie £

Wirdoss Michie 6.0

Fostures | Try | Sesh Dero Read More>> Read More>>

Remote Access aca

OF corfigura *® Configure youroMn

A é DHTM., foms and other @ Insta your own

®@ Curertly nbeta testing and mt avalable to the

4 Abbildung 32.2 Browsercam testet nicht

nur Browserkompatibilitat, sondern priift auch die Ausgabe in verschiedenen

anderen Medien

357

Tiêu đề	Einstieg in CSS
Trường học	University (unspecified)
Chuyên ngành	CSS
Thể loại	Lecture presentation

Định dạng
Số trang	30
Dung lượng	6,69 MB