Advanced CSS/HTML

Some non-trivial HTML, CSS, ~new exciting stuff~. Links: inherit, initial etc, css width/length units

32 flashcards · Programming Languages · by lakesare

1. What is Data URL?

   It's a url scheme that allows to embed small files inline in html. <img src="data:image/gif;base64,R0lGE..." />

2. What are the default values of flexbox? flex-grow: 0; flex-shrink: 1; flex-basis: auto;

   flex-grow: 0; means flex item is not allowed to grow to occupy the container. flex-grow: 2, etc; is a relative value, relative to other flex items flex-grow comes into play when container is too big for flex-basis flex-shrink - when container is too small for flex-basis If flex-basis is not auto, it will fallback to width. If width is not specified, to content.

3. How to create a layout with a fixed <aside/> and flexible <main/>?

   .container{ display: flex; aside{ flex-grow: 0; flex-shrink: 0; flex-basis: 200px; } main{ flex-grow: 1; flex-shrink: 1; flex-basis: 100%; } }

4. table{ table-layout: ... } css property. What are the possible values? What is the initial value?

   table{ table-layout: auto; fixed; initial; inherit; } Initial value is auto.

5. What do table-layout: auto VS fixed do?

   auto: (initial) kind of arbitrarily determines column widths based on content inside of them. fixed: layout has fixed width based on the first row. Set the width of those, and the rest of the table follows.

6. What does <colgroup/> tag do?

   <colgroup> <col span="2" style="color: red"> <col style="color: yellow"> </colgroup> The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_col_test

7. *{ box-sizing: ... } css property. What are the possible values? What is the initial value?

   box-sizing: content-box; border-box; initial; inherit; Initial value is content-box.

8. What do box-sizing: content-box VS border-box do?

   The width and height properties (and min/max properties) includes: content-box: (initial) content. border-box: content, padding and border, but not the margin.

9. What's a CSS grid layout?

   New stuff! Already can be used in most browsers! .parent{ display: grid; } It's like flexbox, but 2-dimensional. Basically we subdivide our .parent into a grid, and define for each child where in the grid it will be located: .child{ grid-column: start end; grid-row: start end; } Links: youtube tutorial

10. What are possible values for <button type="...">? What is the default?

    button - clickable button, do something with Js submit - submit button (submits form-data to action) reset - reset button (actually resets the form-data to its initial values) Default value is different in browsers! So we should always mention the type explicitly.

11. What is the difference between <button type="submit"> and <input type="submit"/>?

    button can have some content inside, while input can't, it's a void tag. Both submit form-data to form.action.

12. How to close void VS normal tags in HTML5? (about end slash, about closing tags)

    End slash (<hi/>) is ignored everywhere. void tags: closing tags are forbidden. normal tags: must have a closing tag.

13. Name 2 ways to submit a form (redirect to form.action) through HTML.

    click on <input/button type="submit"> press enter while focused on <input> Links: html spec

14. Do void tags need to be closed <tag/> in HTML5?

    HTML5 doesn't specify it, both <tag/>, <tag /> and <tag> are okay. XHTML (and therefore XML) though require all tags to be closed, so probably <tag/> is preferable. Links: specs

15. How does .selector{ property: inherit; } work? When may we want to use it?

    works: takes property's value from the parent element. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. when to use: when we want to cascade non-inheritable properties, like margin. Many of the more useful properties automatically cascade down, e.g. fonts, font sizes, colors, etc.

16. overflow css property - name 4 values what is the initial value?

    overflow is a shortcut for overflow-x and overflow-y. visible | hidden | scroll | auto | initial (visible) | inherit visible: overflowed content is visible hidden: hidden scroll: scrollbar is always present auto: scrollbar is present, but only when some content is already clipped

17. What will this result in? background: liner-gradient(blue, yellow);

18. What will this result in? background: liner-gradient(to right, blue, yellow);

19. background: liner-gradient(to right, blue, yellow); What other parameters can we use apart from to right?

    Either: angle: 20deg side-or-corner: to left; to right;to top; to bottom; to left bottom... The values: to top, to bottom, to left, and to right are equivalent to the angles: 0deg, 180deg, 270deg, and 90deg respectively. linear-gradient( [ <angle> | to <side-or-corner> ,]? ... where <side-or-corner> = [left | right] || [top | bottom] Links: mozilla on linear gradient

20. What will this result in? background: liner-gradient(blue, yellow 20%);

    It means: at 20% down start yellow (down because by default side-or-corner is to bottom).

21. linear-gradient(to right, yellow, #009966, purple); Add color stop points.

    linear-gradient(to right, yellow 0%, red 50%, purple 100%);

22. What's a web-safe font?

    Font likely to be present on a wide range of OSes. Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content displays in their chosen font. If a visitor to a Web site does not have the specified font, their browser tries to select a similar alternative, based on the author-specified fallback fonts and generic families or it uses font substitution defined in the visitor's operating system.

23. How to put something in the middle using css grid?

    .container{ display: grid; .item{ grid-column: 2 / 3; grid-row: 2 / 3; } }

24. What is IndexedDB?

    Low-level API for client-side storage of significant amounts of structured data, including files/blobs. Like localStorage, but an actual database. Present in modern browsers. Links: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

25. What's considered a track in CSS grid?

    A grid track is the space between two lines on the grid.

26. <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; } What will this result in visually?

27. What does div{ height: 20vh; } mean?

    1vh = 1% of viewport height. There is also vw for viewport width.

28. What does span{ font-size: 0.5em; } mean?

    0.5 size of the current font-size. Originally, the em was equal to the width of the capital letter M, which is where its name originated.

29. Define and use a css variable.

    :root{ --my-color: brown; } .one{ background: var(--my-color); } By declaring a variable on the :root pseudo-class, a CSS author can reduce the need for repetition by using the variable.

30. What does :focus-within CSS pseudo-class match?

    It represents an element that contains descendant that received :focus. /* Selects a <div> when one of its descendants is focused */ div:focus-within{ background: cyan; } The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class.

31. What defines a viewPort in svg?

32. What's meant by viewport VS viewBox in svg?

    Viewport is what's actually visible, it's defined by <svg width="300" height="300"/>, or by svg{ width: 300px; height: 300px; } controls how big the viewable area is viewBox is defined by the html property <svg viewBox="0 0 14 14"/>. controls what IS inside of the viewable area