BlogPost_6 (6/2/19)
- Describe one thing you learned in class today.
I gained a better understanding of animations within CSS. Transitions and the sort. Very fun class period!
2. Have you ever worked with retina graphics? If so, when and what techniques did you use?
Only slightly and honestly not so much that I can say I’m familiar with the techniques that I practiced within the short time that I used them, but rest assured that I’ll return here with a better answer.
I will say that it’s used for accessibility.
3. What is the CSS display property? Can you give a few examples of its use?
The display property specifies the display behavior (the type of rendering box) of an element.
Some examples are as follows:
flex:
Displays an element as a block-level flex container.
grid:
Displays an element as a block-level grid container.
inline-block:
Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.
inline-flex:
Displays an element as an inline-level flex container.
inline-grid:
Displays an element as an inline-level grid container.
4. What are the advantages/disadvantages of using CSS pre-processors?
Advantages: Nested syntax, ability to define variables, ability to define mixins, mathematical functions. operational functions (such as “lighten” and “darken”) and joining of multiple files.
Disadvantages: Debugging is harder, and compilation time slows down development.
5. Describe z-index and how stacking context is formed.
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
- Root element of the document (
<html>). - Element with a
positionvalueabsoluteorrelativeandz-indexvalue other thanauto. - Element with a
positionvaluefixedorsticky(sticky for all mobile browsers, but not older desktop). - Element that is a child of a flex (
flexbox) container, withz-indexvalue other thanauto. - Element that is a child of a grid (
grid) container, withz-indexvalue other thanauto. - Element with a
opacityvalue less than1(See the specification for opacity). - Element with a
mix-blend-modevalue other thannormal. - Element with any of the following properties with a value other than
none: transformfilterperspectiveclip-pathmask/mask-image/mask-border- Element with a
isolationvalueisolate. - Element with a
-webkit-overflow-scrollingvaluetouch. - Element with a
will-changea value specifying any property that would create a stacking context on non-initial value (see this post). - Element with a
containvalue oflayout, orpaint, or a composite value that includes either of them (i.e.contain: strict,contain: content).
6. Have you used different HTML templating languages before? What are they and what do you think about them?
