1 1 Introduction to CSS3 Client: Intuit (Menlo Park Office); Instructor: Denise R. Jacobs; Company: Knowledge United; Dates: 12-13 April 2012; Day: 1; 2 Meet the Instructor: Me! I’m an author, web designer, speaker and trainer, and creativity evangelist. I wrote The CSS Detective Guide, and co-authored InterAct with Web Standards as well as the upcoming Smashing Book #3. I’ve contributed articles to NetMagazine and A List Apart. 3 About the Course 4 Prerequisites • Knowledge of HTML • Knowledge of basic CSS syntax, functionality, and characteristics (cascade, order, inheritance, specificity) • General knowledge of CSS1 and CSS2 properties • Knowledge of standards-based coding practices (separation of content and presentation) • Familiarity with doctypes and coding validation • Some knowledge of code troubleshooting techniques 5 Course Structure This class is approximately 50/50 lab/lecture. There will be hands-on lab exercise time after most topics to practice the concepts covered. 6 Course Outcomes 1 After completing this course students will: • be able to recognize CSS3 selectors, properties and values • be able to employ CSS3 selectors, properties and values in HTML-based pages • understand the differences between CSS1, CSS2, and CSS3 selectors • be able to recognize and employ all of the CSS selector combinators • be able to utilize advanced CSS2 and CSS3 selectors to better target page elements 2 • understand the difference between and uses for the various @ rules • be able to use various CSS3 properties such as border-radius, @font-face, transform and transition, gradient, box- and text- shadow, opacity and rbga, etc. in HTML-based pages • learn CSS3 cross-browser and graceful degradation coding techniques • learn the concepts of responsive design for multiple devices 7 Lab Tools • Computers must have all of the major browsers on them: Firefox, Safari, Google Chrome, Opera, and IE8. • An objective is to able to cross-browser test to see how the different browsers render the code. If there is a large user base that uses IE7, it will help to have a stand-alone version of IE7 installed on the computers as well so that we can test the fallbacks that are taught. 8 Resources: General Course
Transcript
1
1 Introduction to CSS3Client: Intuit (Menlo Park Office);Instructor: Denise R. Jacobs;Company: Knowledge United;Dates: 12-13 April 2012;Day: 1;
2 Meet the Instructor: Me!I’m an author, web designer, speaker and trainer, and creativity evangelist. I wrote The CSS Detective Guide, and co-authored InterAct with Web Standards as well as the upcoming Smashing Book #3. I’ve contributed articles to NetMagazine and A List Apart.
3 About the Course4 Prerequisites
• Knowledge of HTML • Knowledge of basic CSS syntax, functionality, and characteristics (cascade, order, inheritance, specificity) • General knowledge of CSS1 and CSS2 properties • Knowledge of standards-based coding practices (separation of content and presentation) • Familiarity with doctypes and coding validation • Some knowledge of code troubleshooting techniques
5 Course StructureThis class is approximately 50/50 lab/lecture.
There will be hands-on lab exercise time after most topics to practice the concepts covered.
6 Course Outcomes1 After completing this course students will:
• be able to recognize CSS3 selectors, properties and values• be able to employ CSS3 selectors, properties and values in HTML-based pages• understand the differences between CSS1, CSS2, and CSS3 selectors• be able to recognize and employ all of the CSS selector combinators• be able to utilize advanced CSS2 and CSS3 selectors to better target page elements
2 • understand the difference between and uses for the various @ rules• be able to use various CSS3 properties such as border-radius, @font-face, transform and transition, gradient, box- and text-
shadow, opacity and rbga, etc. in HTML-based pages• learn CSS3 cross-browser and graceful degradation coding techniques• learn the concepts of responsive design for multiple devices
7 Lab Tools• Computers must have all of the major browsers on them: Firefox, Safari, Google Chrome,
Opera, and IE8.
• An objective is to able to cross-browser test to see how the different browsers render the code. If there is a large user base that uses IE7, it will help to have a stand-alone version of IE7 installed on the computers as well so that we can test the fallbacks that are taught.
– General Sibling E~F– Attribute presence– Attribute substrings– Hands-on Lab
3
• Pseudo-elements– (now use :: instead of :)
• Lab: Continue Page Set-up
14 Agenda: Day 1CSS3 Properties, part I• Web Fonts
– @font-face– Webfont services– Google Font API – Hands-on Lab
• New Visual Effects– border-radius– opacity– rgba– box-shadow– text-shadow
Intensive Hands-on Lab
15 Introduction
16 What’s New in CSS3
17 What’s New in CSS3?CSS3 is the third generation of the CSS specification recommendations from the W3C.
18 What’s New in CSS3?In CSS3 there are new selectors, pseudo-elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development.
19 CSS3 Modules
20 CSS3 ModularityCSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module.
From a browser and implementation perspective, the benefit is that browser developers can now implement CSS3 module by module, instead of implementing entire CSS specification. This helps speed up the entire implementation process.
21 The CSS3 Modules1 • Template Layout
• Backgrounds and Borders • Ruby • Basic User Interface • Basic Box Model • Grid Positioning • Speech
4
• Marquee • Style Attribute Syntax • Cascading and Inheritance • Color • Fonts • Text• Generated Content for Paged Media• Generated and Replaced Content
2 • Values and Units• Web Fonts • Behavioral Extensions to CSS • Line Layout • Flexible Box Layout • Image Values • 2D Transformations • Multi-column Layout • 3D Transformations • Namespaces • Transitions • Animations • View Module • Media Queries • Paged Media • Selectors
22 Resources: New in CSS3• http://www.w3.org/TR/tr-groups-all#
tr_Cascading_Style_Sheets__CSS__Working_Group
23 CSS3 Values & Colors
24 Units in CSS (common)Ones you’ll use all of the time:• px: pixels (a dot on the computer screen)
• %: percentage
• em: 1em is equal to the current font size.
2em means 2 times the size of the current font. e.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt.
The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
• At the working draft level, the standard is published for review by "the community". A WD document is the first form of a standard that is publicly available. Commentary by virtually anyone is accepted, though no promises are made with regard to action on any particular element of said commentary.
• At this stage, the standard document may likely have significant differences from its final form. As such, any who implement WD standards should be ready to significantly modify their implementations as the standard matures.• [edit] Candidate Recommendation (CR)
• A candidate recommendation is a version of the standard that is more firm than the WD. At this point, the group responsible for the standard is satisfied that the standard does what is needed of it. The purpose of the CR is to elicit aid from the development community as to how implementable the standard is.
• The standard document may change further, but at this point, significant features are mostly locked. The design of those features can still change due to feedback from implementors.• [edit] Proposed Recommendation (PR)
• A proposed recommendation is the version of the standard that has passed the prior two levels. The users of said standard have had their say, and the implementors of the standard have likewise had a chance at providing input. At this stage, the document has been submitted to the W3C Advisory Council for final approval.
• While this step is important, it rarely causes any significant changes to a standard as it passes to the next phase.• [edit] W3C Recommendation (REC)
• This is the most mature stage of development. At this point, the standard has undergone extensive review and testing, under both theoretical and practical conditions. This standard is now endorsed by the W3C as a standard for wide deployment in its problem domain.
39 None of the older IEs support CSS3…as in “not any.”
7
40 However, IE9 has some support of CSS3
Finally!41 Although the reality is a bit…underwhelming
42 IE9 now supports CSS3…but only these properties:• @font-face• RGBa and HSLa• background-size• multiple backgrounds• border-radius• box-shadow• opacity• CSS transforms• CSS3 selectors (all)
The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property.
http://www.w3.org/standards/techs/css#w3c_all
51 ISO: good cross-browser testershttp://tredosoft.com/Multiple_IE
8
http://crossbrowsertesting.com/(paid)
http://browsershots.org/(free)
52 Cross-browser Coding53 The Goal: Code that works in all browsers
54 Not all browsers are equal
55 How can we achieve this?
56 Steps to get as close as possible1.Leverage source order2.Exercise multiplicity3.Be conditional4.Filter it5.Be defensive6.Let tools do all of the work (polyfills/libraries)
57 Leverage source order• Place default properties first
• Place browser-specific properties ahead of standard properties
• The standard properties will override the vendor’s when the standard is established.
58 A Proper Stack.gradient {color: #000;
59 A Proper Stack.gradient {color: #000;background: #f7f6f4; url(gradient_slice.jpg) 0 0 x-repeat; /*fallback color and image */
60 A Proper Stack.gradient {color: #000;background: #f7f6f4; url(gradient_slice.jpg) 0 0 x-repeat; /*fallback color and image */background: -moz-linear-gradient(top, #ccc9ba 0%, #f7f6f4 100%); /* FF3.6+ */
61 A Proper Stack.gradient {color: #000;background: #f7f6f4; url(gradient_slice.jpg) 0 0 x-repeat; /*fallback color and image */background: -moz-linear-gradient(top, #ccc9ba 0%, #f7f6f4 100%); /* FF3.6+ */background: -webkit-linear-gradient(top, #ccc9ba 0%,#f7f6f4 100%);
9
/* Chrome10+,Safari5.1+ */
62 A Proper Stack.gradient {color: #000;background: #f7f6f4; url(gradient_slice.jpg) 0 0 x-repeat; /*fallback color and image */background: -moz-linear-gradient(top, #ccc9ba 0%, #f7f6f4 100%); /* FF3.6+ */background: -webkit-linear-gradient(top, #ccc9ba 0%,#f7f6f4 100%);/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #ccc9ba 0%,#f7f6f4 100%); /* Opera 11.10+ */
(place after the regular stylesheet link to override styles)
68 Apply a Filter• If you must have the effect in IE, such as alpha opacity, gradient, shadow, transitions etc. you could use
a proprietary IE filter.
• The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers.
• In Internet Explorer 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure Internet Explorer 8 renders the filters properly.
69 Filters: {Caveat Coder}• IE filters work, but are essentially hacks
– IE filters are proprietary and thus not part of any standard specification, and never will be
70 Coding for Older BrowsersPractice preventive/defensive coding
– Focused & efficient code– Be prepared for bugs– Quickly and easily identify and solve problems when they come up
71 Admit it, you like the challenge
72 Let the tools do the work• We’ll talk about those next!
109 Why Reset?By deliberately establishing an element’s properties, you can:• Better control the elements on the page• More quickly determine the source of problems when they arise
110 CSS Reset All-Star: Eric Meyer’s Pro’s
– One of the most popular, well thought-out– Neutralizes almost every element
14
Con’s– Can be too far-reaching– Extra work to establish the values for the elements you want
111 Resource: Eric Meyer’s ResetEric Meyer’s Reset:
http://meyerweb.com/eric/tools/css/reset/
112 DIY Resets• You can determine exactly which elements you want to reset• May save on reestablishing properties• You know exactly what is changed and why you changed it• Problems will be that much more obvious
113 Top Properties to Reset• Margin and padding• Borders, especially on linked images• Link text underlining• Vertical alignment• Font size and line-height
114 Resource: DIY Resets
Article on DIY resets: http://bit.ly/1D4jSB
115 Resource: CSS Reset CompendiaKiller Collection of CSS Resetshttp://tinyurl.com/5bdoj2
More Killer CSS Resetshttp://tinyurl.com/n746dl
116 Normalize.css
117 Normalize v. ResetNormalize.css preserves useful defaults
• Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.
• When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.
• Normalize.css corrects common bugs
• It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5
15
elements, correcting font-size for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.
118 Using Normalize.css• http://stackoverflow.com/questions/6887336/what-is-the-different-between-normalize-
css-and-reset-css
119 Elements of page layout
120 Layout Technique:Floats
121 The Float Property• The float property is used to move elements on the page to either the far left or far right of the
containing element.
• Floating an element makes an element a block box, pushes it to the farthest edge of its containing element, takes it out of the flow of the document, and forces the other elements to wrap around it unless otherwise specified.
• Once floated, an element becomes a block box, even if it is an inline element by definition.
122 clear: (value)• To make a float move to the next line of an adjacent float, you need to clear it.
• Values: left, right, both
123 Containing floats• Because floats are taken out of the flow, they are not contained by their parent element
unless the parent contains an element that is cleared.
Almost everyone’s favorite float-clearing technique.
However, there can be problems:• Content is hidden with no scrollbars when browser window is smaller than container• Potential interference with margins, borders, outlines, and absolutely-positioned PNGs
16
• Application of CSS3 properties, such as box-shadow, text-shadow & transform
128 Overflow: hiddenoverflow: hidden makes the content in the element box to disappear if it extends past the boundaries of the box.
129 Overflow: visibleoverflow: visible allows the content to be rendered regardless of the element box’s dimensions.
130 Overflow: scrolloverflow: scroll, the browser creates scrollbars to let the user view the content of the element while maintaining the specified dimensions.
131 Overflow: autooverflow: auto lets the browser determine whether scrollbars are needed, and will only create them if and where necessary.
133 overflow: hidden ImprovedExample:.container {border: 1px solid #000000;overflow: auto;/* hidden & scroll also work*/width: 100%; /* some width or height required */}
134 “Clearfix”: float clearing
135 Clearing floats: ClearfixClearfix uses the :after pseudo-element to generate a character at the end of the content in the parent container (after the floated elements) that is made into a block element, cleared, and is hidden from view.
136 Clearfix Issues1.Remember where to put it:
Apply .clearfix to the element containing the floats, so that the cleared content is generated after the content inside of it.
2.Be aware of support: Neither IE6 nor IE7 support the :after pseudo-class, so a trigger of hasLayout is necessary.
• Most/all of the clearfixes come with an IE6 & IE7 hack
17
137 Clearfix Issues3.Be mindful of the generated content:
Sometimes the generated period can be a problem
4.Be aware of collapsing margins: New clearfixes speak to this.
147 Display: InlineSetting the display: inline of a block element will cause to display as an inline element, putting it on the same line as other elements and taking up only the width of its contents.
With display: block an element will display as a block element, with whitespace above and below it, and no elements next to it.
2 Inline-block:With display: inline-block, an element can have a width assigned to it like a block element, while still appearing the in the horizontal flow with its surrounding inline elements.
149 “Give floats the flick”http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
153 Optimization Tips FTW!Here are some tips for optimizing your code on both a micro- and macro-level, as well as
19
ways to make sure you are targeting the elements you want on the page.
154 Macro-Optimize: Annotate Your Markup
Example:<div id="content">
<div class="promo">...</div><!-- /end .promo -->
</div><!-- /end #content -->
155 Macro-Optimize: Annotate Your CSS/* Comments are good, mmkay? */
Notation is your friend. For:• Overriding styles• Creating stylesheet sections• Listing the color scheme• Resources and contact info
156 Macro-Optimize: Annotate Your CSS/* made by you on some date */
/* section of the stylesheet */p {border-color: #cf0;border-color-bottom: #ccc; /*this property overrides the previous one */}
157 Macro-optimize: Reduce, Reuse, & Recycle
• Identify content patterns• Use classes instead of ids & elements• Define defaults
158 Micro-Optimize: CSS LengthLess is more:• Use shortest properties and values• Avoid duplicate properties• Use shorthand properties• Condense values and units• (Avoid multiple lines and indenting)
159 Micro-optimize: CSS SpeedUp the efficiency:• ID selectors are speedier than element or universal• Drop element qualifiers• Ditch descendent selectors when and where you can
20
160 Micro-Optimization in ActionExample:#sidebar {background: #fff url(bg.png) repeat-x 0 0;font: normal 1.33em/1.33 Georgia, serif;border: 1px solid #f96;margin: 10px 20px;padding: .1em;}
168 Lab TimeWhile doing the basic layout, we will:• Optimize css, target styles
21
• Establish the page layout with floats, float-clearing techniques, change displays, and use overflow.
169 Lab TimeBe sure to validate your code with the CSS validator:http://jigsaw.w3.org/css-validator/
170 CSS Selectors
171 Document Hierarchy
172 HTML Hierarchy<html><head><title>Mikey Spillane vs. Mike Hammer</title></head><body><h1>Mikey Spillane vs. Mike Hammer</h1><p>Who is the toughest, smartest, and most steely? <em>You</em> get to be the judge by taking this <a href="survey.html">survey</a>.</p><p>Next month's survey: Sir Arthur Conan Doyle or Sherlock Holmes? <imgsrc="doyle.jpg" alt="Doyle vs. Holmes"></p></body></html>
173 HTML Hierarchy
174 The Hierarchy “Family Tree”• An ancestor is any element that is connected to other elements but is higher up the document tree, no matter how many levels up. For example,
in the document above, both the <html> and <body> tags are ancestors of the <p> tag.
• A descendant is any element connected to an ancestor, but lower in the document tree, no matter how many levels down. In our example, the <em>, <a>, and <img> are descendants of the <body> tag.
• A parent is an element directly above a connected element in the document tree. A parent element is also an ancestor, but an element can have ancestors that are not its parents.
• A child element is directly below a connected element. A child is a descendant, but an element can have descendants that are not its children.
• Sibling elements share the same parent, and are on the same level as each other in the hierarchy.
175 Combinator Selectors: Descendent Descendant selectors select the element that is a descendant of another element in the document tree.
184 Selector: Universal• The universal selector is the asterisk (*).
• This selector lets you select every element on the page and apply the style rules to them.
Example:* {font-family: Arial, sans-serif;}
185 Combinator Selectors: Sibling/AdjacentA sibling selector (also known as adjacent) selects an element that is next to another element in the document tree.
Syntax:sibling selector + sibling selector {property: value; }E + F
Example:p + ol {font-family: Georgia, serif;}
186 Combinator Selectors: AttributeAn attribute selector targets a selector with a particular attribute.
Syntax:selector[attribute]
24
Example:•a[title] {font-variant: italic;}
187 What is a pseudo-element?The pseudo-element selector does not match any real HTML element in the document tree, but affects only part of a selector’s element.
188 Pseudo-elements: :first-letter:first-letter targets the first letter of text within an element.
192 The Hierarchy “Family Tree”• An ancestor is any element that is connected to other elements but is higher up the document tree, no matter how many levels up. For example,
in the document above, both the <html> and <body> tags are ancestors of the <p> tag.
• A descendant is any element connected to an ancestor, but lower in the document tree, no matter how many levels down. In our example, the <em>, <a>, and <img> are descendants of the <body> tag.
• A parent is an element directly above a connected element in the document tree. A parent element is also an ancestor, but an element can have ancestors that are not its parents.
• A child element is directly below a connected element. A child is a descendant, but an element can have descendants that are not its children.
• Sibling elements share the same parent, and are on the same level as each other in the hierarchy.
193 CSS3 Selector Specification1 • General sibling
196 Combinator Selectors: General SiblingA general sibling selector (also known as adjacent) selects an element that shares the same parent as another element in the document tree.
Syntax:sibling selector ~ sibling selector {property: value; }E ~ F
Example:p ~ dd {font-family: Georgia, serif;}
197 Combinator Selectors: Attribute presence
selector[attribute="value"] targets a selector with a particular attribute and specific value.Example:img[src=“catchathief.jpg”] {border: 1px solid #999; }
selector [attribute~="value"] targets a selector with a particular attribute and value where the value is one of multiple values separated by a space.Exampleimg[alt~="CSI"] {border: 1px #ff8000 solid;}
198 Combinator Selectors: Attribute presence
selector [attribute|="value"] targets an element with an attribute that contains values separated
selector [attribute^="value"] targets an element with an attribute that begins with a prefix of “value”. Example:img[title^=“th_"] { border: 1px solid #000; }
selector [attribute$="value"] targets an element with an attribute which ends with a suffix of “value.”Example:img[title$=“png"] { border: 1px solid #000; }
200 Combinator Selectors: Attribute substrings
selector [attribute*="value"] targets an element with an attribute that contains “value” as any part of a value string.
203 Lab TimeWhere appropriate, let’s add styles to our example page using some of the advanced CSS2.1 selectors such as: • Child: E > F• Sibling: E + F• Attribute: selector[attribute]
204 CSS3 Properties:
27
Part I
205 Web Fonts
206 @font-face
207 @font-face
208 @font-face• Note:
– Actually part of the CSS2.1 specification. – Therefore, the IEs do support it!
• Browser Support– However, the older IEs require fonts to be in EOT format– IE9 now supports WOFF!
226 Lab TimeLet’s add @font-face to our example page using • the Google API• A FontSquirel @font-face kit
227 New Visual Effects in CSS3
228 New Visual Effects in CSS31.border-radius2.opacity3.rgba color4.box-shadow
30
5.text-shadow6.gradient
229 border-radius
230 Old-skool: code contortions
231 border-radius• Tips & issues
– Different syntax for older versions of webkit browsers
• Browser Support– IE does not support, Opera: 10.50+ only
232 border-radius
#contentcolumn {-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;border-radius: 20px 20px 0 0;}
233 border-radius
#contentcolumn {-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;border-radius: 20px 20px 0 0;}
234 Graceful Degradation: border-radius• Square corners are okay
• Extra credit: serve images through conditional comments
235 Graceful Degradation: border-radiusIn modern browsers
236 Graceful Degradation: border-radiusIn modern browsers
237 Full solution: border-radius#contentcolumn {
margin: -40px 3% 0 3%;width: 42%;-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6);-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6);
243 Lab Time• Let’s add border-radius to our example page.
244 rgba
245 rgba
32
• Tips & issues– Granular control of elements
• Browser Support– IE lt 8 does not support, IE 9 does– You can use the gradient IE filter to give transparency with a color: just make the beginning and
end colors the same.
246 Cross-browser: rgba• Place after regular rgb color property to override in modern browsers; older browsers
will ignore it
• IE bug: use the property background instead of background-color for the regular color
247 Graceful degradation: rgbaIn modern browsers
248 Full solution: rgba.rgba {background-color: #ff0000; /* fallback color in hexidecimal */background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */background-color: rgba(255, 0, 0, 0.3);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000, endColorstr=#4CFF0000)";
/* filter for IE8 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000, endColorstr=#4CFF0000);
274 Graceful degradation: gradient• Gradient will not appear older browsers
• Establish fallback background image first in code
275 Graceful degradation: gradientIn modern browsers
276 gradient.gradient {background: #f7f6f4; url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */background: -moz-linear-gradient(top, #ccc9ba 0%, #f7f6f4 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc9ba), color-stop(100%,#f7f6f4));
![Developing Windows 8 Apps with HTML, CSS & JavaScript ...download.microsoft.com/.../480.2.CSS.pdf · Selectors type selectors.class selectors #id selectors [attribute] selectors:pseudo-class](https://static.documents.pub/doc/80x56/5ed5cf5ed48e3c5e0c2a9cd5/developing-windows-8-apps-with-html-css-javascript-selectors-type-selectorsclass.jpg)
