Function expressions are invoked to avoid polluting the global scope. Instead of your program being aware of many different functions, when you keep them anonymous, they are used and forgotten immediately.
To summarize, function declarations are utilized when you desire to establish a function in the global scope that can be accessed anywhere in your code. On the other hand, function expressions are employed to confine the accessibility of the function, reduce the weight of the global scope, and maintain a neat syntax.
One of the things I’ve found a bit of a ball ache as a developing developer, is sorting out spacing i.e. padding and margin issues when creating pages using Magento.
For example, let’s say I want to change the spacing above an image.
Best thing I’ve found to do to find the margin or padding that I want to change:
Right click on image – choose Inspect Element
In the “styles” tab of dev tools, look for margin and padding styles
In this instance, it’s not the image, or the images div or container that’s causing the spacing that I don’t want:
In this instance, I click on the “Div” or container, that the image resides within (the parent element)
Now I’ve found the issue with the spacing at the top that is too large:
I can now go into the stylesheet and amend the class “content-image section” or just add an in-line style to this individual incidence of the class, and change “margin-top” to something like 15px.
When you are inspecting an element in Chrome, Dev tools will also tend to highlight (in a dark shade) the spacing around that element too, so it shows you which element is generating the padding or margin.
You can “visualise” transitions, using Inspect Element/Chrome Developer Tools and clicking on “ease” or the transition-property you’ve created/stated:
You can also play around with rotation
Remember to copy the code before you exit Chrome dev tools.
Warning about CSS Transitions
If you can limit transitions to transforms and opacity.
A browser can use a graphics card for transforms and opacity.
For other transitions, you can create transitions which will look strange and very jerky for some users. This is especially true if you set the transition-property to “all”, rather than specific elements.
Be careful when using transitions on box shadows, borders, backgrounds etc.
Some HTML elements have default sizes. For example, default for paragraph (<p>) text, is 16px.
You can change the size of text with the “font-size:” property in CSS
Relative Sizes in CSS
Relative sizes and measurements are a bit confusing to us newbies.
The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.
Using an emvalue creates a dynamic or computed font size (historically the em unit was derived from the width of a capital “M” in a given typeface.). The numeric value acts as a multiplier of the font-size property of the element on which it is used. Consider this example:
In this case, the font size of <p> elements will be double the computed font-size inherited by <p> elements. By extension, a font-size of 1em equals the computed font-size of the element on which it is used.
If a font-size has not been set on any of the <p>‘s ancestors, then 1em will equal the default browser font-size, which is usually 16px.
So, by default 1em is equivalent to 16px, and 2em is equivalent to 32px.
If you were to set a font-size of 20px on the <body> element say, then 1em on the <p> elements would instead be equivalent to 20px, and 2em would be equivalent to 40px.
In order to calculate the em equivalent for any pixel value required, you can use this formula:
em = desired element pixel value / parent element font-size in pixels
For example, suppose the font-size of the <body> of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).
The em is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.
When the font-size is specified as a percentage, it is relative to the parent element’s font size
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
You can use percentage values. They act like em values.
The value is relative to the parent‘s font-size. As a result, the value will cascade if used on child elements.
The value is relative to the root element‘s font-size, which is the <html> element. As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.
Let’s say you have made a grid, with 6 items, but you want the first one to be different to the rest. Probably the easiest way to achieve this, is to add a “.grid-item-1” styles section, below the CSS you’ve created for the rest of the grid items.
If you use the W3 try it yourself tool, remember to click “Run” on the top left, as the code doesn’t update real time.
css grid equal height rows
If you add the value/property thing in CSS, to the .grid-container section of the CSS (assuming you’ve named the class of your container .grid-container) to “grid-auto-rows: 1fr;” – then all the rows should be equal height. Or you could just set the heights to 100px each