-
Notifications
You must be signed in to change notification settings - Fork 728
/
css.html
666 lines (649 loc) · 42 KB
/
css.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="that js dude" content="">
<title>interview: css questions</title>
<link rel="shortcut icon" href="images/favicon.jpg">
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" href="css/zenburn.css">
<!-- Custom styles for this template -->
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-bottom: 20px;
}
.purpleBold{
color:purple;
font-weight: bold;
}
.gray{
color: gray;
}
.blueish{
color: rgba(151, 182, 209, 0.98);
}
.singInStuff{
margin-top: 9px;
}
#uName{
margin-top: -7px;
}
.skipListItem{
list-style-type: none;
}
.skipListItem a{
color: inherit;
}
a:visited
{
color: rgba(218, 209, 149, 0.98);
}
/*style for demo*/
.demoContainer{
width: 200px;
border: 2px solid purple;
}
.floatContainer{
height: 100px;
}
.clearContainer{
height: 150px;
}
.clearLeft{
clear:left;
}
.clearBoth{
clear: both;
}
.box{
float: left;
width:50px;
height: 30px;
border: 2px solid gray;
margin:5px;
}
.element{
height: 50px;
width: 50px;
transition: width 2s linear 0.5s, background-color 2s linear 0.5s;
background-color: purple;
}
.element:hover {
width: 100px;
background-color: red;
}
.overflowContainer{
height: 280px;
border: 2px solid gray;
padding: 5px;
overflow-y: scroll;
overflow-x: hidden;
}
.overflowBox{
padding: 5px;
margin: 5px;
float: left;
border: 2px solid gray;
}
.overflowBox p{
width: 150px;
height: 150px;
}
.overflowVisible{
overflow: visible;
}
.overflowHidden{
overflow: hidden;
}
.overflowScroll{
overflow: scroll;
}
.overflowAuto{
overflow: auto;
}
.imageContainer{
height: 165px;
border: 2px solid gray;
overflow-y:scroll;
}
.imageHolder{
float: left;
}
.imageContainer img{
width: 120px;
height: 120px;
margin: 5px;
}
.imageHolder p{
text-align: center;
}
.imgGray{
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
}
.imgInvert{
filter:invert(100%);
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-ms-filter:invert(100%);
-o-filter:invert(100%);
}
.imgBlur{
filter:blur(3px);
-webkit-filter:blur(3px);
-moz-filter:blur(3px);
-ms-filter:blur(3px);
-o-filter:blur(3px);
}
.imgBright{
filter:brightness(200%);
-webkit-filter:brightness(200%);
-moz-filter:brightness(200%);
-ms-filter:brightness(200%);
-o-filter:brightness(200%);
}
.imgOpacity{
filter:opacity(30%);
-webkit-filter:opacity(30%);
-moz-filter:opacity(30%);
-ms-filter:opacity(30%);
-o-filter:opacity(30%);
}
#pseudoElementExample p:before{
content: "Starting of Paragraph: ";
font-weight: bolder;
color: purple;
}
#alignExample div{
height: 100px;
border: 2px solid gray;
text-align: center;
position: relative;
}
#alignExample div p{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
</style>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>CSS: interview questions</h1>
<h2>21+ questions for intermediate JS developer</h2>
<p>January 05, 2014</p>
<div id="fb-root"></div><div class="fb-like" data-href="http://www.thatjsdude.com/interview/css.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> <div class="g-plusone"></div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row center">
<!-- <iframe width="853" height="480" src="//www.youtube.com/embed/Rx_JFOSxgpY" frameborder="0" allowfullscreen></iframe> -->
</div>
<p class="gray"> <span class="purpleBold">Warning!</span>, if you have couple of tattoos in your body, this is not the right place. You certainly have more in depth knowledge, fancy portfolio and you have to express that. These questions are for lazy intermediate JS developers to get the job by creating an illusion of familiarity with css---</p>
<h3>List of Questions</h3>
<ol>
<li><a href="#float">what does float do?</a></li>
<li><a href="#clear">How can you clear sides of a floating element?</a></li>
<li class="skipListItem blueish"><a href="#clear">How can you clear sides of a floating element?</a></li>
<li value="3"><a href="#rapidFire">some tricky questions in rapid fire style</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">Does css properties are case sensitive?</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">Why css selectors mixed up with cases don't apply the styles?</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">Does margin-top or margin-bottom has effect on inline element?</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">Does padding-top or padding-bottom has effect on inline element?</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">Does padding-left or padding-right or margin-left or margin-right has effect on inline element?</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">In a HTML document, the pseudo class :root always refers to the <html> element.</a></li>
<li class="skipListItem blueish"><a href="#rapidFire">The translate() function can move the position of an element on the z-axis.</a></li>
<li value="4"><a href="#units">Which one would you prefer among px, em % or pt and why?</a></li>
<li><a href="#position">How absolute, relative, fixed and static position differ?</a></li>
<li><a href="#displayVisibility">What are the differences between visibility hidden and display none?</a></li>
<li><a href="#inlineBlock">What are the differences between inline, block and inline-block?</a></li>
<li><a href="#boxModel">What are the properties related to box model?</a></li>
<li><a href="#overflow">Does overflow: hidden create a new block formatting context?</a></li>
<li><a href="#mediaQueries">How could you apply css rules specific to a media?</a></li>
<li class="skipListItem blueish"><a href="#mediaQueries">What is the use of only?</a></li>
<li class="skipListItem blueish"><a href="#mediaQueries">Does the screen keyword apply to the device's physical screen or the browser's viewport?</a></li>
<li value="11"><a href="#pseudoClass">What are the some pseudo classed u have used?</a></li>
<li><a href="#verticalCenter">How do you align a p center-center inside a div?</a></li>
<li><a href="#optimizeSelector">How do you optimize css selectors?</a></li>
<li><a href="#importStyle">How can you load css resources conditionally?</a></li>
<li><a href="#cssSprite">Why would you use sprites?</a></li>
<li><a href="#specificity">What is specificity? How do u calculate specificity?</a></li>
<li><a href="#shadowDOM">What is shadow DOM?</a></li>
<li><a href="#transition">What do you know about transition?</a></li>
<li><a href="#filter">What are the different css filter you can use?</a></li>
<li><a href="#preProcessor">What are the reasons to use preprocessor?</a></li>
<li><a href="#seeAndTell">Show you couple of style example and you have to tell what does it do.</a></li>
</ol>
<h3>Deleted Scenes!</h3>
<p class="gray">Looks like these are for hardcore designer folks. Hence, didn't make in for developers.</p>
<ul>
<li>How descendant css selectors are matched? <a href="https://www.youtube.com/watch?v=EW8Bg_H_P7M">get answer</a></li>
<li>How would u implement modularity in css?</li>
<li>If something doesn't work in a specific browser (IE8), you would u approach this problem?</li>
<li>How do you test cross-browser compatibility of your site?</li>
<li>What is the greatest hack you did in css so far?</li>
<li>What is grid layout?</li>
<li>How can you make a site responsive?</li>
<li>Why reset css is useful? or how normalize.css works?</li>
<li>What do you know about text shadows, box shadows?</li>
</ul>
<p><strong>Need more:</strong> <strong><a href="html.html">HTML Interview Questions</a></strong>, <strong><a href="js1.html">JavaScript Beginners Algorithm</a></strong></p>
<div id="float">
<h2>1. float</h2>
<p><strong>Question:</strong> What does float do?</p>
<p><strong>Answer:</strong> float pushes an element to the sides of a page with text wrapped around it. you can create entire page or a smaller area by using float. if size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float left, right, none or inherit.</p>
<p> if you set, 'float: left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.</p>
<div>
<button id = "float" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="floatExample" class="hide">
<pre><code>
<style><br/> .floatContainer{<br/> width: 200px;<br/> height: 100px;<br/> border: 2px solid purple;<br/> }<br/> .box{<br/> float: left;<br/> width: 50px;<br/> height: 30px;<br/> border: 2px solid gray;<br/> margin: 5px;<br/> }<br/> </style>
<div class="container"><br/> <div class="box"><span>1</span></div><br/> <div class="box"><span>2</span></div><br/> <div class="box"><span>3</span></div><br/> <div class="box"><span>4</span></div><br/> <div class="box"><span>5</span></div><br/> </div>
</code></pre>
<div class="floatContainer demoContainer">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
</div>
</div>
</div>
<p>If interviewer wants to ask one question about css, it will be most likely about float.</p>
<p><strong>extra:</strong> read the positioning constraints in <a href="http://www.w3.org/TR/CSS1/#floating-elements">W3.org: floating elements</a>.</p>
ref: <a href="http://css-tricks.com/all-about-floats/">css-tricks: float</a>, <a href="http://alistapart.com/article/css-floats-101">float 101</a>
</div>
<div id="clear">
<h2>2. clear</h2>
<p><strong>Question:</strong> How can you clear sides of a floating element?</p>
<p><strong>Answer:</strong> If you clear a slide of an element, floating elements will not be accepted on that side. With 'clear' set to 'left', an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element.</p>
<div>
<button id = "clear" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="clearExample" class="hide">
<pre><code>
<style><br/> .clearLeft{<br/> clear: left;<br/> }<br/> </style>
<div class="container"><br/> <div class="box"><span>1</span></div><br/> <div class="box clearLeft"><span>2</span></div><br/> <div class="box"><span>3</span></div><br/> <div class="box"><span>4</span></div><br/> <div class="box"><span>5</span></div><br/> </div>
</code></pre>
<p>as clear left is applied to the second box. no other elements would be on the left of that box and hence it is placed in a new row. </p>
<div class="clearContainer demoContainer">
<div class="box"><span>1</span></div>
<div class="box clearLeft"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
</div>
</div>
</div>
<p><strong>Question:</strong> How can you fix, "floated points don't add up to the height of a parent"?</p>
<p><strong>Answer:</strong> You can use <code>clear: both</code> in an empty div <code><div style="clear: both;"></div></code>, you can use overflow hidden or scroll and you can float the parent as well. </p>
<p><span class="purpleBold">What the heck?</span> Sorry. if you didn't get the question or answer, please read "Techniques for clearing floats" in <a href="http://css-tricks.com/all-about-floats/">css-tricks: all about floats</a></p>
<p>ref: <a href="http://www.w3.org/TR/CSS1/#clear">W3.org: clear</a>
</div>
<div id="rapidFire">
<h2>3. rapid fire</h2>
<p><strong>Question:</strong> Are css properties case sensitive?</p>
<p><strong>Answer:</strong> no.</p>
<p><strong>Question:</strong> Are css selectors (id and classes) case sensitive?</p>
<p><strong>Answer:</strong> yes. </p>
<p><strong>Question:</strong> Do the properties margin-top and margin-bottom have an effect on inline element?</p>
<p><strong>Answer:</strong> no.</p>
<p><strong>Question:</strong> Do the properties padding-top and padding-bottom have an effect on inline element?</p>
<p><strong>Answer:</strong> no.</p>
<p><strong>Question:</strong> Do the properties padding-left, padding-right, margin-left and margin-right have an effect on inline element?</p>
<p><strong>Answer:</strong> yes.</p>
<p><strong>Question:</strong> If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?</p>
<p><strong>Answer:</strong> no.</p>
<p><strong>Question:</strong> The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.</p>
<p><strong>Answer:</strong> False</p>
<p><strong>Question:</strong> In a HTML document, the pseudo class :root always refers to the <html> element.</p>
<p><strong>Answer:</strong> True</p>
<p><strong>Question:</strong> The translate() function can move the position of an element on the z-axis.</p>
<p><strong>Answer:</strong> False</p>
</div>
<div id="units">
<h2>4. units</h2>
<p><strong>Question:</strong> Which one of these units would you prefer: px, em % or pt and why?</p>
<p><strong>Answer:</strong> it depends on what you are trying to do.</p>
<p><code>px</code> gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px.</p>
<p><code>em</code> maintains relative size. you can have responsive fonts. em is the width of the letter 'm' in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade</p>
<p><code>%</code> sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.</p>
<p><code>pt</code>(points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.</p>
<p>ref: <a href="http://css-tricks.com/the-lengths-of-css/">css-tricks: length</a>, <a href="http://css-tricks.com/css-font-size/">css-tricks: px, em, %</a>, <a href="http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/">css font-size</a> </p>
</div>
<div id="position">
<h2>5. position</h2>
<p><strong>Question:</strong> How do absolute, relative, fixed and static position differ?</p>
<p><strong>Answer:</strong> </p>
<p><em>absolute</em>, place an element exactly where you want to place it. absolute position is actually set relative to the element's parent. if no parent available then relatively place to the page itself.</p>
<p><em>relative</em>, is position an element relative to itself (from where the element would be placed, if u don't apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally.</p>
<p><em>fixed</em>, element is positioned relative to viewport or the browser window itself. viewport doesn't changed if u scroll and hence fixed element will stay right in the same position.</p>
<p><em>static</em>, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element.</p>
<p>ref: <a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">css positioning in ten steps</a>, <a href="http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/">css position</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN: position</a></p>
</div>
<div id="displayVisibility">
<h2>6. display vs visibility</h2>
<p><strong>Question:</strong> What are the differences between visibility hidden and display none?</p>
<p><strong>Answer:</strong> <code>display: none</code> removes the element from the normal layout flow and allow other elements to fill in. <code>visibility: hidden</code> tag is rendered, it takes space in the normal flow but doesn't show it.</p>
<p>if u want to say it smartly, <code>display: none</code> causes DOM reflow where as <code>visibility: hidden</code> doesn't. btw, what is re-flow? answer. sorry i wont tell you, google it.</p>
<p>ref: <a href="http://www.vanseodesign.com/css/visibility-vs-display/">visibility vs Display</a></p>
</div>
<div id="inlineBlock">
<h2>7. inline block</h2>
<p><strong>Question:</strong> What are the differences between inline, block and inline-block?</p>
<p><strong>Answer: </strong></p>
<p><code>inline</code>, elements do not break the flow. think of span it fits in the line. Important points about inline elements, margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignores height and width.</p>
<p><code>block</code>, breaks the flow and dont sits inline. they are usually container like div, section, ul and also text p, h1, etc.</p>
<p><code>inline-block</code>, will be similar to inline and will go with the flow of the page. Only differences is this this will take height and width.</p>
<p>ref: <a href="http://css-tricks.com/almanac/properties/d/display/">display</a></p>
</div>
<div id="boxModel">
<h2>8. box model</h2>
<p><strong>Question:</strong> What are the properties related to box model?</p>
<p><strong>Answer:</strong> Technically, height, width, padding and border are part of box model and margin is related to it.</p>
<p><strong>Extra:</strong> Everything in a web page is a box where you can control size, position, background, etc. Each box/ content area is optionally surrounded by padding, border and margin. When you set height and width of an element, you set content height and width.</p>
<p>ref: <a href="http://www.w3.org/TR/CSS21/box.html">W3: box model</a>, <a href="http://css-tricks.com/the-css-box-model/">css box model</a>, <a href="http://pressupinc.com/blog/2014/01/whats-wrong-css-box-model-fix/">Whats wrong with box model</a></p>
<div>
<button id = "boxModel" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="boxModelExample" class="hide">
<img src="images/boxModel.gif" alt="">
<p>ref: image taken from google search</p>
</div>
</div>
</div>
<div id="overflow">
<h2>9. overflow</h2>
<p><strong>Question:</strong> Does overflow: hidden create a new block formatting context?</p>
<p><strong>Answer:</strong> yes</p>
<p><strong>Extra:</strong> overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).</p>
<div>
<button id = "overflow" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="overflowExample" class="hide">
<div class="overflowContainer">
<div class="overflowBox">
<p class="overflowVisible"><code>overflow: visible</code> This is some simple content to see how overflow works when you have too many things to say in a too small space. But don't be the person who just say rather be the person who does. does something for himself and others.</p>
</div>
<div class="overflowBox">
<p class="overflowHidden"><code>overflow: hidden</code> This is some simple content to see how overflow works when you have too many things to say in a too small space. But don't be the person who just say rather be the person who does. does something for himself and others.</p>
</div>
<div class="overflowBox">
<p class="overflowScroll"><code>overflow: scroll</code> This is some simple content to see how overflow works when you have too many things to say in a too small space. But don't be the person who just say rather be the person who does. does something for himself and others.</p>
</div>
<div class="overflowBox">
<p class="overflowAuto"><code>overflow: auto</code> This is some simple content to see how overflow works when you have too many things to say in a too small space. But don't be the person who just say rather be the person who does. does something for himself and others.</p>
</div>
</div>
</div>
</div>
<br>
<p>ref: <a href="http://css-tricks.com/the-css-overflow-property/">overflow</a> (read the link and add something from it)</p>
</div>
<div id="mediaQueries">
<h2>10. media queries</h2>
<p><strong>Question:</strong> How could you apply css rules specific to a media?</p>
<p><strong>Answer: </strong> <code>@media (max-width: 700px){...}</code> means you want to apply rules to those media whose max-width is 700 px. this means every smaller device will have this rule.</p>
<p><code>@media (max-width: 700px) and (orientation: landscape){...}</code> will apply rules for media smaller than 700px and in landscape orientation.</p>
<p><strong>Question:</strong> What is the use of only?</p>
<p><strong>Answer:</strong> to hide style sheets from older user agents.</p>
<p><strong>Question:</strong> Does the screen keyword apply to the device's physical screen or the browser's viewport?</p>
<p><strong>Answer:</strong> Browser's Viewport</p>
<p>ref: <a href="http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/">how to use media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">css media queries</a>, <a href="http://www.w3.org/TR/css3-mediaqueries/#media0">W3: media queries</a></p>
</div>
<div id="pseudoClass">
<h2>11. pseudo class</h2>
<p><strong>Question:</strong> What are the some pseudo classed u have used?</p>
<p><strong>Answer: </strong> pseudo class tells you specific state of an element. allow to style element dynamically. The most popular one is <code>:hover</code>. Besides i have used <code>:visited</code>, <code>:focus</code>, <code>:nth-child</code>, <code>nth-of-type</code>, <code>:link</code>, etc.</p>
<p>pseudo classes is better if you don't want to mess up with javaScript however, pseudo-classes is slow to process and apply rules.</p>
<p>ref: <a href="http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/">How to use pseudo classes</a>, <a href="http://css-tricks.com/pseudo-class-selectors/">meet pseudo classes</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">list of pseudo classes</a></p>
<h4>pseudo elements</h4>
<p>pseudo elements helps you to add cosmetics contents. pseudo elements generates content where as pseudo class deals with state of the element. for example, you can style <code>:first-letter</code> of every paragraph. similarly, <code>:first-line</code> and fancy stuff with <code>:before</code>, <code>:after</code></p>
<div>
<button id = "pseudoElement" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="pseudoElementExample" class="hide">
<pre><code>
<style><br/> p:before{<br/> content: "Starting of Paragraph: ";<br/> font-weight: bolder;<br/> color: purple;<br/> }<br/></style><br/><p>First Paragraph with some content.</p><br/><p>Second Paragraph with something else.</p>
</code></pre>
<strong>result:</strong>
<p>First Paragraph with some content.</p>
<p>Second Paragraph with something else.</p>
</div>
</div>
<p>ref: <a href="http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/">intro to css pseudo element</a>, <a href="http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/">:before :after</a>, <a href="http://css-tricks.com/css-content/">css content</a>, <a href="http://www.w3.org/TR/CSS21/generate.html">W3: generate content</a></p>
</div>
<div id="verticalCenter">
<h2>12. vertical Center</h2>
<p><strong>Question:</strong> How do you align a p center-center inside a div?</p>
<p><strong>Answer:</strong> <code>text-align: center</code>will do the horizontal alignment but <code>vertical-align: middle</code> will not work here. there are couple of different ways to solve this problem and one of them are positioning. You make the parent as relative position and child as absolute positioning. And then define all position parameter as sero and width 50% and height 30% (sounds messy look at the example and read ref) </p>
<div>
<button id = "align" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="alignExample" class="hide">
<pre><code>
<style><br/> .divContainer{<br/> height: 100px;<br/> border: 2px solid gray;<br/> text-align: center;<br/> position: relative;<br/> }<br/> p{ <br/> position: absolute;<br/> top: 0;<br/> bottom: 0;<br/> left: 0;<br/> right: 0;<br/> width: 50%;<br/> height: 30%;<br/> margin: auto;<br/> }<br/></style><br/><div class = "divContainer"><br/> <p>content example</p><br/></div><br/>
</code></pre>
<strong>result:</strong>
<div>
<p>content example</p>
</div>
</div>
</div>
<p>ref: <a href="http://www.vanseodesign.com/css/vertical-centering/">6 methods for vertical center</a>, <a href="http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/">Absolute horizontal and vertical centering</a></p>
</div>
<div id="optimizeSelector">
<h2>13. optimize selector</h2>
<p><strong>Question:</strong> How do you optimize css selectors?</p>
<p><strong>Answer: </strong> This is very open and depend on what you are trying to achieve. If i order selectors in terms of render speed it would be like id, class, tag, siblings, child, descendant, universal, attribute, pseudo. Speed of ID and class is very close. However your code should be readable, maintainable and DRY along with highly performant.</p>
<p>The best practices in general are: avoid universal selectors, don't repeat yourself, remove redundant selectors, be as specific as possible, and keep learning.</p>
<p>ref: <a href="http://realityonweb.com/cascading-style-sheet-css/performance-improvement-by-writing-efficient-css-selector/">Efficient CSS selectors</a>, <a href="http://css-tricks.com/efficiently-rendering-css/">efficiently rendering</a></p>
</div>
<div id="importStyle">
<h2>14. @import</h2>
<p><strong>Question:</strong> How can you load css resources conditionally?</p>
<p><strong>Answer:</strong> @import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.</p>
<p>ref: be careful while using @import (<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">don't use @import</a>)</p>
</div>
<div id="cssSprite">
<h2>15. sprite</h2>
<p><strong>Question:</strong> Why would you use sprites?</p>
<p><strong>Answer:</strong> When you have multiple images/ icons, browser makes separate call to the server for each one of them. sprite is a technique to combine all/ some of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image. To display the icon you set height, width and background position.</p>
<p>popular libraries like bootstrap use this technique. If you repeat the image. want to scale you have to be careful with sprite.</p>
<p>ref: <a href="http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/">css sprites</a>, <a href="http://css.spritegen.com/">generate sprites</a></p>
</div>
<div id="specificity">
<h2>16. specificity </h2>
<p><strong>Question:</strong> What is specificity? How do u calculate specificity?</p>
<p><strong>Answer:</strong> is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence. </p>
<p>inline style usually wins then ID then class value (or pseudo-class or attribute selector), universal selector (*) has no specificity.</p>
<p>ref: <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">css specificity: things you need to know</a>, <a href="http://www.standardista.com/css3/css-specificity/">specifishity</a>, <a href="http://specificity.keegan.st/">specificity calculator</a></p>
</div>
<div id="shadowDOM">
<h2>17. shadow DOM</h2>
<p><strong>Question:</strong> What is shadow DOM?</p>
<p><strong>Answer:</strong> encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable. if interviewer is not happy with your answer give him the links and tell him to spend a weekend on reading.</p>
<p>ref: <a href="http://www.w3.org/TR/shadow-dom/#introduction">W3: shadow-DOM</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">html5rock: shadow DOM</a></p>
</div>
<div id="transition">
<h2>18. transition</h2>
<p><strong>Question:</strong> What do you know about transition?</p>
<p><strong>Answer:</strong> transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation</p>
<div>
<button id = "transition" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="transitionExample" class="hide">
<pre><code>
.transition {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
.element {
width: 50px;
background-color: purple;
transition: width 2s linear 0.5s, background-color 2s linear 0.5s;
}
.element:hover {
width: 100px;
background-color: red;
}
</code></pre>
<p>Hover over the purple box and wait. also move the out ur mouse.</p>
<div class="element"></div>
<p><strong>Advanced:</strong> you can check transform: <a href="http://www.sitepoint.com/advanced-css3-2d-and-3d-transform-techniques/">css 2D 3D transform</a>, <a href="http://css3.bradshawenterprises.com/flip/">flip an image</a></p>
</div>
</div>
<p>ref: <a href="http://blog.alexmaccaw.com/css-transitions">all you need to know about css transition</a>, <a href="http://css3.bradshawenterprises.com/transitions/">transition: tutorial</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">css transition</a>, <a href="http://www.html5rocks.com/en/tutorials/3d/css/">transition and 3D</a></p>
</div>
<div id="filter">
<h2>19. filter</h2>
<p><strong>Question:</strong> What are the different css filter you can use?</p>
<p><strong>Answer:</strong> css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.</p>
<div>
<button id = "filter" type="button" class="toggleExample btn btn-primary">show example</button>
<div id="filterExample" class="imageContainer hide">
<div class="imageHolder"><img class="" src="images/flower.jpg" alt=""><p>Original</p></div>
<div class="imageHolder"><img class="imgGray" src="images/flower.jpg" alt=""><p>grayscale(100%)</p></div>
<div class="imageHolder"><img class="imgBright" src="images/flower.jpg" alt=""><p>brightness(200%)</p></div>
<div class="imageHolder"><img class="imgBlur" src="images/flower.jpg" alt=""><p>blur(3px)</p></div>
<div class="imageHolder"><img class="imgOpacity" src="images/flower.jpg" alt=""><p>opacity(30%)</p></div>
<div class="imageHolder"><img class="imgInvert" src="images/flower.jpg" alt=""><p>invert(100%)</p></div>
</div>
</div>
<p>ref: <a href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding css filter effect</a></p>
</div>
<div id="preProcessor">
<h2>20. pre processor</h2>
<p><strong>Question:</strong> What are the reasons to use preprocessor?</p>
<p><strong>Answer:</strong> you write css in high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.</p>
ref: <a href="http://css-tricks.com/musings-on-preprocessing/">css preprocessor</a>, <a href="https://developers.google.com/chrome-developer-tools/docs/css-preprocessors">working with preprocessor</a>
</div>
<div id="seeAndTell">
<h2>21. see & tell</h2>
<p><strong>Question:</strong> What would be the color of text "I am awesome" for the following rules?</p>
<p><strong>html:</strong> for questions a-d.</p>
<pre><code>
<ul class="shopping-list" id="awesome"><br/> <li><span>Milk</span></li><br/> <li class="favorite" id="must-buy"><span class="highlight">I am awesome</span></li><br/></ul>
</code></pre>
<strong>a.</strong>
<pre><code>
<style><br/> ul#awesome {<br/> color: red;<br/> }<br/> ul.shopping-list li.favorite span {<br/> color: blue;<br/> }<br/></style>
</code></pre>
<p><strong>Answer:</strong> blue</p>
<br>
<strong>b.</strong>
<pre><code>
<style><br/> ul#awesome #must-buy {<br/> color: red;<br/> }<br/> .favorite span {<br/> color: blue!important;<br/> }<br/></style><br/>
</code></pre>
<p><strong>Answer:</strong> blue</p>
<br>
<strong>c.</strong>
<pre><code>
<style><br/> ul.shopping-list li .highlight {<br/> color: red;<br/> }<br/> ul.shopping-list li .highlight:nth-of-type(odd) {<br/> color: blue;<br/> }<br/></style><br/>
</code></pre>
<p><strong>Answer:</strong> blue</p>
<br>
<strong>d.</strong>
<pre><code>
<style><br/> #awesome .favorite:not(#awesome) .highlight {<br/> color: red;<br/> }<br/> #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {<br/> color: blue;<br/> }<br/></style><br/>
</code></pre>
<p><strong>Answer:</strong> red</p>
</div>
<h3>Position related</h3>
<div id="optional_tag">
<p><strong>Question:</strong> What will happen to the position of #myDude?</p>
<pre><code>
<style><br/> #myDude {<br/> margin-bottom: -5px;<br/> }<br/></style><br/><p id="myDude">Dude</p>
</code></pre>
<p><strong>Answer:</strong> All elements succeeding #myDude will move 5px updward.</p>
<p><strong>reason:</strong> .</p>
<pre><code>
<style><br/> #myDude {<br/> margin-left: -5px;<br/> }<br/></style><br/><p id="myDude">Dude</p>
</code></pre>
<p><strong>Answer:</strong> #myDude will move 5px left.</p>
<h3>download resources</h3>
<p><strong>Question:</strong> On page load, will mypic.jpg get downloaded by the browser?.</p>
<pre><code>
<style><br/> #test2 {<br/> background-image: url('mypic.jpg');<br/> display: none;<br/> }<br/></style><br/><div id="test1"><br/> <span id="test2"></span><br/></div>
</code></pre>
<p><strong>Answer:</strong> yes.</p>
<p><strong>Question:</strong> On page load, will mypic.jpg get downloaded by the browser?</p>
<pre><code>
<style><br/> #test1 {<br/> display: none;<br/> }<br/> #test2 {<br/> background-image: url('mypic.jpg');<br/> visibility: hidden;<br/> }<br/></style><br/><div id="test1"><br/> <span id="test2"></span><br/></div>
</code></pre>
<p><strong>Answer:</strong> No.</p>
<br>
<h3>read selector</h3>
<p><strong>Question:</strong> What will this selector do?</p>
<pre><code>
[role=navigation] > ul a:not([href^=mailto]) {
}
</code></pre>
<p><strong>Answer:</strong> This selects anchor links that are not email links that are decedents of an unordered list that is the direct child of any element with a role attribute of 'navigation'. this answer copied from <a href="http://css-tricks.com/interview-questions-css/">css tricks</a></p>
ref: show & tell is mostly based on <a href="http://davidshariff.com/quiz/">David Shariff: quiz</a>
</div>
<div>
</div>
<p><strong>Need more:</strong> <strong><a href="html.html">HTML Interview Questions</a></strong>, <strong><a href="js1.html">JavaScript Beginners Algorithm</a></strong></p>
<p><a href="http://www.sitepoint.com/12-little-known-css-facts/">12 little known css facts</a></p>
<p><a href="http://alistapart.com/article/css-shapes-101">css shapes 101</a></p>
<div>
<h3 class="purpleBold">Express anger!</h3>
<p class="gray">Feel free to express your anger (sorry folks, you have to use g+.). Also point out my mistakes ( technical, wrong answer, spelling, grammar, sentence..., whatever), let your dude learn and grow.</p>
<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
data-href="http://www.thatjsdude.com/interview/css.html"
data-width="642"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>
</div>
<hr>
<footer>
<p>©thatJSDude 2014</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="js/toggleExample.js"></script>
<script type="text/javascript">
//social plugins
//g+
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
//fb
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>