skip navigation

Various 1

Tagged in: various , object-fit , attr , centering , box-sizing , calc , CSS custom properties
Grouped in: various

Various short bits of info…

object-fit

object-fit is a CSS property to help images change size without their aspect ratios being destroyed. object-fit can have the following values:

  • object-fit: fill. This default value allows images to change shape to fit the space
  • object-fit: contain. Preserves the aspect ratio while fitting within the content box. No clipping.
  • object-fit: cover. Preserves aspect ratio, fills the entire space, clipping sides as needed.
  • object-fit: none. No resizing
  • object-fit:

NB Sizes for the image are declared in the CSS and these will set the frame for how the image behaves inside.

For good visual examples check out https://www.morelearning.ml/playground/object-fit/ on MoreLearning.ml

Resizing elements

Any element can become resizable in the browser using the resize property.

.stretchMe {
  resize: both;
  overflow: auto;
}

resize can have values of: horizontal, vertical, both or none.

The HTML <main> tag

The <main> tag is a bit like a container or wrapper for the unique content of each page. It can only be used once per page though it must not contain repeating elements like the header or menu. It cannot be a child of <article> , <aside> , <footer>, <header> , <nav>

Using HTML attributes as Content

The content value is often used with the pseudo elements ::before and ::after. You can use the value (or text string) of one of the attributes in the HTML tag. For example after a link you might want to incorporate the full url or perhaps the title value.

This can be done using the attr(href) as a content value coming after all links. Example:

a::after {
  content: ' - ' attr(href);
}

The attribute you want to use is defined in the brackets.

The outer set of quotes is for the whole content. In this case it allows for an extra space and a hyphen to separate the original link from the generated full url that now appears right after it.

This is more useful than it might first appear. On the links page I used attr(id) to add the name to the top of each class of links.

Centering with Flexbox

There are two ways depending on whether you have an element within an element or just some text within the element.

For the first way you set the parent to display: flex. Then just set the child to margin: auto;

If you just want to center some text within it’s own element setting it horizontally is easy: text-align: center;.

For the vertical alignment you set these 3 declarations:

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
text only int middle <br>
centered by flexbox

Box-Sizing

Without setting this property the default is content-box. This is the way CSS has worked for years. It means in a given box of a fixed size when you add padding or a border the box will get bigger.

With box-sizing: border-box the box will stay the same size and the border or padding are subtracted from the inside space.

It’s an easy change to make. Just add this to your stylesheet and bingo. Job done.

*, 
*::before, 
*::after {
 	 box-sizing: border-box;
  }>

Calc

Calc can be handy sometimes. The key is to remember the spaces in the syntax:

.container {
   width: 900px;
   position: absolute;
   left: calc(50% - 450px);
}

Rotating Objects

To rotate any object is easy in CSS:

div {
  transform: rotate(15deg);
}

But this part of a much bigger system of tranformations.

Absolute Positioning

To get absolute positioning to work the way it’s supposed to, that is an element is positioned inside its parent, the parent must also have a position value of relative or absolute or fixed, but not static, which is the default.

outerbox {
	position: relative;
}

innerbox {
	position: absolute;
}

CSS variables

You can now use variables for different properties in CSS. By defining a custom variable you can change everywhere that variable is at the same time.

A concrete example: say you want the header, the navigation and footer section to all have the background color. Typically you might have to define this in 3 separate places. If you want to change it you have to back to all 3 places. However with variable you can just change your custom property and it will change everywhere it’s used.

Typically you’ll define it in the root element so it covers every instance but you can assign it any element.

Make a word for your custom property. Let’s call the above nav-bg-color.

You define it in the root (or whereever you want it to apply) thus:

:root {
	--nave-bg-color: lightblue;
}

Note the two dashes at the start of your custom name. These are always used with variables.

Then you tell each element you’re using your custom variable property like this:

nav {
	background-color: var(--nav-bg-color);
}

header {
	background-color: var(--nav-bg-color);
}

footer {
	background-color: var(--nav-bg-color);
}

Now all you have to do to change the colour in all 3 places is change the colour in the variable you defined in the :root element. Hey presto, it changes in all three places.

NB These don’t work in the current version of IE v11 at the time of writing.

Top margin to zero…

Sometimes an element won’t reach the top or bottom of the page as expectd. The margin is set to zero so what gives? Well an empty element has no height so an element inside it will break out the bottom and any top margin will stick out the top. Solution? Set the top (or bottom) margin to zero for those elements. Use padding instead to get them where you want them.

Key was reducing the top tag with content’s margin to zero. Weird huh? FF only?

Styling order

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

View the CSS for this page 


nav ul {
	margin-top:0;
}

.flex {
	display:flex;
}

.flexbox {
	padding:0;
	margin-right: 1.5em;
}

.flexbox > ul {
	list-style-type: none;
	margin: 1em 0;
	padding: 0;
}

.flexbox > ul > li {
	padding: 12px 7px;
	font-size: 0.8em;
	color: #000;
}

.flexbox > p {
	font-weight: bold;
}

h2 {
	counter-increment: myIndex 1;
}
h2::before {
	content: counter(myIndex) ". " ;
}

ol.pagenav {
	margin-left: 1em;
	list-style-type: decimal;
}

#centered-text {
    width: min(450px, 100%);
    height: 230px;
    border: solid 1px #fff3;
    background-color: #1111;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
☝