Didier Mahaux dmao

Learn CSS

Learn CSS on MDN Beginner.

Learn CSS on Web.dev Beginner.

Learn Responsive Design on Web.dev Advanced.

Learn to write better, resilient CSS Layout - Advanced.

References

Keybase proof

I hereby claim:

I am dmao on github.
I am didmao (https://keybase.io/didmao) on keybase.
I have a public key ASBz2pLQzgIED3qwy8oejKO09CmQt9Jxjk8aLfKP6D3OMQo

To claim this, I am signing this object:

Keybase proof

I hereby claim:

I am dmao on github.
I am xwp_dmao (https://keybase.io/xwp_dmao) on keybase.
I have a public key ASDov8EGUebqXxm-wRxU37JcQFdpBQhVqcThA6BGSjHwyAo

To claim this, I am signing this object:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

	p{
	margin-bottom:20px;
	}
	p+p{
	text-indent:2em;
	margin-top:-20px;
	}

	$(document).ready(function() {

	// Support for AJAX loaded modal window.
	// Focuses on first input textbox after it loads the window.
	$('[data-toggle="modal"]').click(function(e) {
	e.preventDefault();
	var url = $(this).attr('href');
	if (url.indexOf('#') == 0) {
	$(url).modal('open');
	} else {

	// http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/
	img {
	width:auto; // for IE8
	max-width:100%;
	height:auto;
	}

	h1 {
	-moz-font-feature-settings: "liga=1, dlig=1";
	-ms-font-feature-settings: "liga", "dlig";
	-webkit-font-feature-settings: "liga", "dlig";
	-o-font-feature-settings: "liga", "dlig";
	font-feature-settings: "liga", "dlig";
	}

	## use the Mamp version of php
	export PATH=/Applications/MAMP/bin/php/php5.4.4/bin:$PATH

	## Alias
	alias compass-prod='compass compile --output-style compressed --force'
	alias ..='cd ..'
	alias l="ls -al"
	alias ?='pwd'
	alias web='cd /Applications/MAMP/htdocs'

	sudo chown -R _www wordpress
	sudo chmod -R g+w wordpress