CSS3 Properties

Question 1

::selection

Answer 1

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user. p::selection {}

Question 2

input-placeholder

Answer 2

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties. ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }

Question 3

@font-face

Answer 3

Allows the use of online fonts @font-face { font-family: “FontName”; src: url(‘fontfile.eot’); src: url(‘fontfile.eot?iefix’) format(‘eot’), url(‘fontfile.svg#FontName’) format(‘svg’), url(‘fontfile.ttf’) format(‘truetype’), url(‘fontfile.woff’) format(‘woff’); }

Question 4

What types of web fonts can be used?

Answer 4

formats: eot, svg, ttf, woff

Question 5

calc()

Answer 5

Method of allowing calculated values for length units, i.e. width: calc(100% - 3em)

Question 6

background-attachment

Answer 6

Method of defining how a background image is attached to a scrollable element. Values include scroll (default), fixed and local. background-attachment: scroll; background-attachment: fixed; background-attachment: local; background-attachment: inherit;

Question 7

background-position edge offsets

Answer 7

Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: background-position: right 5px bottom 5px; for positioning 5px from the bottom-right corner.

Question 8

box-decoration-break

Answer 8

Controls whether the box’s margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line). http://caniuse.com/#feat=css-boxdecorationbreak

Question 9

counters

Answer 9

Method of controlling number values in generated content, using the counter-reset and counter-increment properties. counter-reset: section counter-increment: section http://caniuse.com/#feat=css-counters https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

Question 10

currentColor

Answer 10

A CSS value that will apply the existing color value to other properties like background-color, etc. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword

Question 11

CSS generated content for pseudo-elements

Answer 11

Method of displaying text or images before or after the given element’s contents using the ::before and ::after pseudo-elements. All browsers with support also support the attr() notation in the content property. https://docs.webplatform.org/wiki/css/generated_and_replaced_content

Question 12

Gradients

Answer 12

Method of defining a linear or radial color gradient as a CSS image. http://css3files.com/gradient/

Question 13

Outline

Answer 13

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient. Outlines differ from borders in the following ways: Outlines do not take up space, they are drawn above the content. Outlines may be non-rectangular. outline: 1px solid white;

Question 14

repeating gradient

Answer 14

Method of defining a repeating linear or radial color gradient as a CSS image. #grad1 { background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); }

Question 15

3D transforms

Answer 15

rotateY, rotateX, rotateZ (deg); translateY, translateX, translateZ (deg);

Question 16

perspective

Answer 16

perspective property to set the perspective in z-space Transform: perspective (600px); Perspective: 600px;

Question 17

Improved kerning pairs and ligitures

Answer 17

Currently non-standard method of improving kerning pairs & ligatures using text-rendering: optimizeLegibility. auto (default); optimizeSpeed; optimizeLegibility; geometricPrecision

Question 18

user select:none

Answer 18

Prevents using from selecting text .row-of-icons { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */ -o-user-select: none; user-select: none; }

Question 19

text stroke

Answer 19

Method of declaring the outline (stroke) width and color for text. -webkit-text-stroke Specifies the width and color of the outline (stroke) of text. Syntax -webkit-text-stroke: width color

Question 20

Appearance

Answer 20

.thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme. This is used for one of two reasons: To apply platform specific styling to an element that doesn’t have it by default To remove platform specific styling to an element that does have it by default For instance, inputs with a type=search in WebKit browsers by default have rounded corners and are very strict in what you can alter via CSS. If you don’t want that styling, you can remove it in one fell swoop with appearance.

Question 21

Viewport units

Answer 21

Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Question 22

rem

Answer 22

root em units rem Type of unit similar to em, but relative only to the root element, not any parent element. Thus compounding does not occur as it does with em units.

Question 23

filters

Answer 23

-webkit-filter: filtername (value); filter: filtername (value); Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG. value is often a decimal, % or deg angle grayscale, sepia, hue-rotate, saturation

Question 24

media queries resolution

Answer 24

Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query. @media (-webkit-min-device-pixel-ratio: 2), /* Webkit */ (min-resolution: 192dpi) /* Everyone else */ { … } @media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */ (min-resolution: 1.5dppx) /* The Future */ … }

Question 25

dpi vs dppx

Answer 25

Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio. The resolution media query can take “dots per inch” and “dots per centimeter”, while -webkit-device-pixel-ratio takes “dots per px”. But these are all fundamentally the same thing because 1in = 96px = 2.54cm. (Granted, not all of this was well-understood in 2006, so we can forgive Webkit for making something up.) So to unprefix -webkit-device-pixel-ratio all you have to do is convert it to resolution—which is already implemented by all the other browsers. The easiest way is to multiply the value by 96 and append dpi. But wait! you say. I don’t want to do math! Can’t the CSSWG standardize device-pixel-ratio so I don’t have to do math? We could… but then we’d have two features that do exactly the same thing. And typing device-pixel-ratio is awkard, isn’t it? So instead, we added the dppx unit to mean “dots per px”. This way, we can avoid dpi math not just in media queries, but anywhere else that takes a , too. Instead of having to add a new device-pixel-resolution query, browsers can just implement the new dppx unit (which is already in CR) for the old resolution query. Then you can just write (min-resolution: 2dppx).

Question 26

Flexible boxing

Answer 26

Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex as well as align-content, align-items, align-self, and justify-content. display: flex; flex-flow: ; flex-wrap: ;

e. g
div. conrtainer {
height: 300px;
display: flex;

align-items: center; (flex-start, flex-end, stretch and baseline) Vetical position

justify-content: center; horizontal position

}

Question 27

overflow-wrap and text-overflow

Answer 27

overflow-wrap: Enables words to wrap even if they are longer than their container. overflow-wrap: normal; overflow-wrap: break-word; text-overflow: Controls how text is displayed when it is longer than its containing area. -what the overflow property is set to might override what’s set here text-overflow: normal; ellipsis; clip; nowrap (only first line shows)

Question 28

multiple background images

Answer 28

It’s possible to have multiple background images background: url(image1.png), url(image2.png), url(image3.png) What will happen is these will layer over the top of each other You can also use background: url(image1.png) right bottom, url(image2.png) center, url(image3.png)

Question 29

Background clip

Answer 29

Sets the visible range of the background including background images. By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour it’s possible to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead, content is not supported). values background-clip: border-box | content-box | padding-box;

Question 30

Css pointer events

Answer 30

The user-select property enables authors to specify which elements in the document can be selected by the user and how. This allows for easier interactions when not all elements are equally useful to select, avoiding accidental selections of neighbouring content.

user-select: auto | none | text | element

This CSS property, when set to “none” allows elements to not receive hover/click events, instead the event will occur on anything behind it.

http://caniuse.com/#feat=pointer-events

http://dev.w3.org/csswg/css-ui-4/#content-selection

Question 31

image set

Answer 31

Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.

This example shows how to use image-set() to provide an image in three versions: a “normal” version, a “high-res” version, and an extra-high resolution version for use in high-quality printing (as printers can have extremely high resolution):
background-image: image-set( “foo.png” 1x, “foo-2x.png” 2x, “foo-print.png” 600dpi );

http://dev.w3.org/csswg/css-images-3/#image-set-notation

Question 32

resize

Answer 32

Method of allowing an element to be resized by the user, with options to limit to a given direction.

resize: none | both | horizontal | vertical | inherit

Question 33

border-radius

Answer 33

Allows you to specify rounded corners. specified in units (e.g. px, em)

To target a specfic side, border-radius-side e.g border-top/bottom-left/right-radius.

Make circles by specifying border-radius: 45px on each side

Question 34

text-shadow

Answer 34

Adds shadow to text.

text-shadow: 1px 1px 2px #FFF;

The fist specifies the horizontal offset

the 2nd specifies the vertical offset

the 3rd amount of blur

The 4th colour

Question 35

box-shadow

Answer 35

Adds a shadow to block level elements

similar sytanx to text-shadow

box-shadow: 1px 1px 2px #FFF;

Question 36

box-sizing

Answer 36

Informs how padding, border and content width affect elements size

box-sizing: boder-box;

The width and height properties (and min/max properties) includes content, padding and border, but not the margin

box-sizing: content-box; (default value)

Question 37

opactity

Answer 37

opacity: 0.5

0 means transparent, 1 fully opaque

Question 38

transitions

Answer 38

transition-property: ;

transition-delay: ;

transition-timing-function;

transition-duration.

shorthand: transition: property duration timing-function

Question 39

css transforms

Answer 39

scale

transform: 1.5; 1 =100% 1.5 150%

skew

transform: skew 30deg;

rotate

transform: rotate 30deg;

translate

transform: 20px 50px; horizontal vertical

Question 40

What’s the syntax to have two css transforms?

Answer 40

transform: scale(1.5) rotate(30deg);

Note: no comma in between values

Question 41

Multi column layout

Answer 41

column-count: # of columns e.g. 3;

column-gap: gap between columns e.g. 30px; no on either side

column-rule: border syntax e.g. 1px solid #ddd;

column-span: for headings;