Technical Questions Flashcards

Question

Can you give an example of an @media property other than screen?

Answer 1

all - for all media type devices print - for printers speech - for screenreaders that "reads" the page out loud screen - for computer screens, tablets, smart-phones etc.

Answer 2

Avoid using tag and universal selectors for your key selector. Avoid using styles that trigger reflow.

Answer 3

Some advantages would be: The code is easier to maintain More efficient to write with nested selectors Mixins can be used for repeated styles Ability to split into different files Disadvantages would be: Additional tooling is required You aren't able to use the most current features of standard CSS Advantages: CSS is made more maintainable. Easy to write nested selectors. Variables for consistent theming. Can share theme files across different projects. Mixins to generate repeated CSS. Sass features like loops, lists, and maps can make configuration easier and less verbose. Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file. Disadvantages: Requires tools for preprocessing. Re-compilation time can be slow. Not writing currently and potentially usable CSS. For example, by using something like postcss-loader with webpack, you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.

Answer 4

Explanation: I've found that being able to split files and nest selectors is the most useful. A couple of downsides are that debugging is a little more difficult and having to wait for compilation. Advantages: CSS is made more maintainable. Easy to write nested selectors. Variables for consistent theming. Can share theme files across different projects. Mixins to generate repeated CSS. Sass features like loops, lists, and maps can make configuration easier and less verbose. Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file. Likes: Mostly the advantages mentioned above. Less is written in JavaScript, which plays well with Node. Dislikes: I use Sass via node-sass, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions. In Less, variable names are prefixed with @, which can be confused with native CSS keywords like @media, @import and @font-face rule.

Answer 5

Explanation: Use @font-face and define font-family

Answer 6

This part is related to the above about writing efficient CSS. Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. For example with this selector p span, browsers firstly find all the elements and traverse up its parent all the way up to the root to find the

element. For a particular , as soon as it finds a

, it knows that the matches and can stop its matching.

Answer 7

Explanation & Use: A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s) Example: ::first-line can be used to change the font of the first line of a paragraph A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: ...) without having to modify the markup (:before, :after). :first-line and :first-letter can be used to decorate text. Used in the .clearfix hack as shown above to add a zero-space element with clear: both. Triangular arrows in tooltips use :before and :after. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.

Answer 8

Explanation: The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area and optional surrounding padding, border, and margin areas. Use: The standard box model calculates box size by taking a specified height and width, then adding the padding and border. However to change to the alternative box model you would set box-sizing: border-box which allows you to set the box size with height and width.

Answer 9

It allows you to specify the actual width and height of a box using the width and height properties. This allows you to input true sizes and not have to do any math to take padding and borders into account. By default, elements have box-sizing: content-box applied, and only the content size is being accounted for. box-sizing: border-box changes how the width and height of elements are being calculated, border and padding are also being included in the calculation. The height of an element is now calculated by the content's height + vertical padding + vertical border width. The width of an element is now calculated by the content's width + horizontal padding + horizontal border width. Taking into account paddings and borders as part of our box model resonates better with how designers actually imagine content in grids.

Answer 10

Explanation & Use: The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Example: display: block would make the element consume the whole line width. display: grid would allow you to layout children in a grid system. If you wanted three columns you could pair it with something like grid-template-columns: 1fr 1fr 1fr none - Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree block - The element consumes the whole line in the block direction (which is usually horizontal)

Answer 11

Explanation: inline CANNOT specify width and height Can only set margin and padding for the sides, not top and bottom. inline-block CAN specify width and height Can set margin and padding on all sides inline Elements can be laid out beside each other inline-block Similar to inline, but allows some block properties like setting width and height

Answer 12

Explanation: Relative - Position is relative to it's original static position. Original space on the page is preserved. Fixed - Element removed from page flow and placed in spot relative to viewport. It won't move when scrolled. Absolute - Element removed from page flow and positioned relative to it closest "positioned" ancestor. Original space on the page is not preserved Static - The default position. top, right, bottom, left and z-index properties do not apply. static - The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply. relative - The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). absolute - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements. fixed - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled. sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Answer 13

Bootstrap - It takes a while to get the latest CSS features added. Your sites end up looking very similar to others. Tailwind - The HTML can feel very cluttered. Reusing styles is a bit clunky.

Answer 14

Explanation: I have used both flexbox and grid and like to employ both of them. Use: I find grid to be useful for the top level page layout and any elements which have a typical grid layout. I prefer using flexbox for sections and other elements which don't need a rigid grid alignment. Example: If I had something like a tic-tac-toe board I would use grid as it is easy to get the boxes to align and be the same size. If I had some sort of information card with multiple pieces of information I would likely use flexbox. Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts. Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

Answer 15

Explanation: Making a website responsive means the some elements will respond by adapting its size or other functionality according to the device's screen size. A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Use: You would use media queries to make the above changes at certain screen size breakpoints. Example: An example of mobile first and responsive would be: .my-class { font-size: 12px; } @media (min-width: 600px) { .my-class { font-size: 24px; } } Note that these two 2 approaches are not exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices. @media (min-width: 601px) { .my-class { font-size: 24px; } } @media (max-width: 600px) { .my-class { font-size: 12px; } } A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example: .my-class { font-size: 12px; } @media (min-width: 600px) { .my-class { font-size: 24px; } } A mobile-first strategy has 2 main advantages: It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries. It forces to write cleaner code in respect to responsive CSS rules.

Answer 16

Explanation: Both responsive and adaptive design attempt to optimize the user experience across different devices. Use: Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Instead of one flexible design, adaptive design detects the device then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. I believe responsive is the best approach to provide a great experience for all users. Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on. Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops. Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size. Both have these methods have some issues that need to be weighed: Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes? Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.

Answer 17

Explanation: Retina is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using highest resolution images will have an impact on page load times. Use: To overcome this problem, we can use responsive images, as specified in HTML5 with the srcset attribute. Example:

Answer 18

Transform causes the browser to create a GPU layer for the element. Changing absolute positioning properties uses the CPU. Hence translate() is more efficient and will result in shorter paint times for smoother animations.