Resize

The resize property controls if and how an element can be resized by the user by clicking and dragging the bottom right corner of the element.

It is important to know that, resize does nothing unless the overflow property is set to something other than visible, which is its initial value for most elements.

It's also worth knowing that Firefox will let you resize an element smaller than its original size. Webkit browsers will not let you resize an element to make it smaller, only larger (in both dimensions).

Resize property is commonly used in textarea element.

.module {
	resize: both;
}

Here are the following values you can use -

• none The element is not resizeable. This is the initial value for most elements. The textarea element is the most common exception—in many browsers its default resize value is both.
• both The user can resize the element's height and/or width.
• horizontal The user can resize the element horizontally (increasing the width).
• vertical The user can resize the element vertically (increasing the height).

<div class="box">
	<p style="background: whitesmoke; padding: 20px; resize: both; height: 30px; width: 300px; overflow: hidden;">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div>

cursor

The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality.

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

You can also have the cursor be an image:

.custom {
	cursor: url(images/my-cursor.png), auto;
}

pointer-events

The pointer-events property defines whether or not an element reacts to pointer events.

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

.avoid-clicks {
	pointer-events: none;
}

While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. The three valid values for any HTMl element are:

• none prevents all click, state and cursor options on the specified HTML element
• auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified
• inherit will use the pointer-events value of the element's parent

The prime use case for pointer-events is to allow click or tap behaviour to “pass through” an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elements with opacity (eg. tooltips) and still allowing text-selection on the content below it.

.avoid-clicks {
	display: block;
	width: 8em;
	height: 8em;
	background: rgba(51,51,51,0.85);
	position: absolute;
	top: 1em;
	left: 4em;
	padding: 0.75em;
	pointer-events: none;
	color: whitesmoke;
}
.DemoPointerEvent {
	padding: 0.75em;
	background: #ddd;
}

<div class="box" style="position: relative;">
	<p class="DemoPointerEvent">This is some basic flow content. Lorem ipsu
		This is some basic flow content. Lorem ipsum dolor sit amet, 
		consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi 
		modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque 
		expedita quia molestiae in. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
		sed do eiusmod labore et dolore magna aliqua. Ut enim ad minim veniam,
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<div class="avoid-clicks">try selecting text through me</div>
</div>

Here is another example using button. The button won't be clickable anymore. If you remove pointer-events, it will work normally -

.box2{
	padding : 10px;
	background-color : red;
	pointer-events : none;
}

<button class="box2" onclick='show()'>Click Me</button>

function show(){
	alert("Okay");
}

tab-size

The tab-size property in CSS is used to adjust the amount of spaces that display for the tab character.

The tab character (unicode U+0009) is typically converted to spaces (unicode U+0020) by the white space processing rules and then collapsed so that only one space in a row is displayed in the browser. Therefore the tab-size property is only useful when the white space processing rules do not apply, namely inside a <pre> tag and when the white-space property of an element is set to pre-wrap.

The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.

p.fourtabs {
    tab-size:4;
    -moz-tab-size: 4;
    -o-tab-size:  4;
  	white-space: pre-wrap;
}


pre.twelvetabs {
    tab-size: 12;
    -moz-tab-size: 12;
    -o-tab-size:  12;
}

without tab
	with 1 tab
		with 2 tabs

without tab
	with 1 tab
		with 2 tabs 

As you can see in the examples above, the tab-size property adjusts the amount of space allotted for the tab character. In the second example, the

tag has to have its white-space property adjusted to pre-wrap in order for the tab characters to not be converted to regular spaces and collapsed.

You will also notice in the CSS that the -moz- and -o- prefixes are required for Firefox and Opera, but Chrome accepts the non-prefixed version.

user-select

The user-select property in CSS controls how the text in an element is allowed to be selected. For example, it can be used to make text unselectable.

It can accept one of the following three values -

• none Prevents the selection.
• all Select all text at once.
• auto The default value is auto, which makes selection happen normally as you expect.

.row-of-icons {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users (not have them accidentally text-select useless things, like icons or images). However it's a bit buggy. Firefox enforces the fact that any text matching that selector cannot be copied. WebKit still allows the text to be copied if you select elements around it.

You can also use this to enforce that an entire element gets selection:

.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}

calc()

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.

All CSS Preprocessors do have math functions and they are pretty useful. But they aren't quite as powerful as native math. The most useful ability of calc() is its ability to mix units, like percentages and pixels. No Preprocessor will ever be able to do that. It is something that has to happen at render time.

	.thing {
	  width: 90%; /* fallback if needed */
	  width: calc(100% - 3em);
	}

There must be spaces surrounding the math operator. You can nest.

Example 1 : Using calc() on Header

	.Example1{
		height: 300px; 
		width: 200px; 
		background: black; 
		padding: 20px;
		box-sizing: border-box;
	}
	.Example1Header{
		width: 100%; 
		height: 50px; 
		display: flex; 
		justify-content: flex-start;
		align-items: center;
		font-weight: 500;
		font-size: 17px;
		background: crimson;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.Example1Body{
		height: 100%;
		width: 100%;
		background: #eee;
	}

	<div class="Example1">
		<div class="Example1Header">Header</div>
		<div class="Example1Body">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		</div>
	</div>

As you can see, the second child have the 100% height and that's why it is taking the whole height of the parent element and causing vertical overflow. To fix this we need to set the height 50px minus from the 100%. calc() method help us do that -

	.Example2{
		height: 300px; 
		width: 200px; 
		background: black; 
		padding: 20px;
		box-sizing: border-box;
	}
	.Example2Header{
		width: 100%; 
		height: 50px; 
		display: flex; 
		justify-content: flex-start;
		align-items: center;
		font-weight: 500;
		font-size: 17px;
		background: crimson;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.Example2Body{
		height: calc(100% - 50px);
		width: 100%;
		background: #eee;
	}

	<div class="Example2">
		<div class="Example2Header">Header</div>
		<div class="Example2Body">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore
		</div>
	</div>

Example 2 : Positioning the Background

Let's say you want to place a dog's picture in a container.

	background-image: url(dog.png);
	background-position: 50px 20px;

That would put the dog 50px from the left and 20px from the top of the elements box. But what if you want it 50px from the right and 20px from the bottom? Not possible with just straight length values. But calc() makes it possible!

	background-image: url(dog.png);
	background-position: calc(100% - 50px) calc(100% - 20px);
	background-repeat: no-repeat;

Example 3 : Column Gutter

Let's say you want two columns next to each other. The first 40% wide, the second 60%, but with a fixed 1em gap between the columns. The solution is to create another div inside either one of them and have 1em padding. But this is not a straight forward solution.

Using calc(), we can make the first column 40% wide with a right margin of 1em, then make the second column 60% wide minus that 1em.

	.area-one {
	  width: 40%;
	  float: left;
	  margin-right: 1em;
	}

	.area-two {
	  width: calc(60% - 1em);
	  float: right;
	}

Example 4 : Grid Columns

Speaking of columns, sometimes division math gets messy. Let's say you wanted a 7-column grid, you might have classes like:

	.column-1-7 {
	   width: 14.2857%
	}
	.column-2-7 {
	   width: 28.5714%
	}
	.column-3-7 {
	   width: 42.8571%
	}

Not exactly magic numbers, but difficult to understand at a glance.

	.column-1-7 {
	   width: calc(100% / 7);
	}
	.column-2-7 {
	   width: calc(100% / 7 * 2);
	}
	.column-3-7 {
	   width: calc(100% / 7 * 3);
	}

Now it's more readable.

attr()

The attr() function returns the value of an attribute of the selected elements. Ther is not much use case of attr() method. It is only used on ::before and ::after pseudo elements. Actually it is used with the content property to insert content.

	a:after {
		content: " (" attr(href) ")";
	}

Consider the following example -

	.Lol::before{
		content:attr(title);
		color: red;
	}


	<table border="1">
	  <tr>
	    <td class="Lol" title="Name">Name</td>
	    <td class="Lol" title="Roll Number">Roll No</td>
	  </tr>
	  <tr>
	    <td>Santanu Bera</td>
	    <td>110</td>
	  </tr>
	  <tr>
	    <td>Anushree Panja</td>
	    <td>20</td>
	  </tr>
	</table>

object-fit

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

object-fit can be set with one of these five values:

• fill This is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
• contain Increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
• cover The image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
• none Image will ignore the height and width of the parent and retain its original size.
• scale-down The image will compare the difference between none and contain in order to find the smallest concrete object size.

	.ImageContainer{
		background: red;
		border: 2px solid black;
		margin: 10px;
		display: inline-block;
		box-sizing: border-box;
		font-size: 0;
	}
	.fill, .contain, .cover, .scale-down{
		width: 300px;
		height: 300px;
	}
	.fill{
		object-fit: fill;
	}
	.contain{
		object-fit: contain;
	}
	.cover{
		object-fit: cover;
	}
	.scale-down{
		object-fit: scale-down;
	}	

	<div class="ImageContainer">
		<img class="fill" src="Assets/img/Santanu.jpg">
	</div>

	<div class="ImageContainer">
		<img class="contain" src="Assets/img/Santanu.jpg">
	</div>

	<div class="ImageContainer">
		<img class="cover" src="Assets/img/Santanu.jpg">
	</div>

	<div class="ImageContainer">
		<img class="scale-down" src="Assets/img/Santanu.jpg">
	</div>

object-position

The object-position property is used in conjunction with object-fit property and defines how an element such as a video or image is positioned with X/Y coordinates inside its content-box. This property takes two numerical values, such as 0 10% or 0 10px. In those examples, the first number indicates that the image should be placed at the left of the content box (0), the second that it should be positioned 10% or 10px from the top. It is also possible to use negative values.

The default value for object-position is 50% 50% when using the object-fit property on an image, so that by default all images are positioned in the center of their content box, like so:

	
	img {
	  object-fit: none;
	  object-position: 50% 50%; /* default value: image is centered*/
	  object-position: 0 0; /* positioned top left of the content box */
	}

Taking from the above example with the object-fit: contain; -

	.contain{
		object-fit: contain;
		object-position : 0 0;
	}

	<div class="ImageContainer">
		<img class="contain" src="Assets/img/Santanu.jpg">
	</div>