writing-modeの変化に対応できるプロパティ

writing-modeに対応したプロパティを試す

"block-size, inline-size"以後は"block-size, inline-size"プロパティを使ったサンプル対して各プロパティを追加していく。

//html

<div class="block">

	<div class="h-tb">horizontal-tb</div>

	<div class="v-rl">vertical-rl</div>

</div>

			

//css

.block{

	width:300px;

	height:300px;

	background:lightgray;

	overflow:hidden;

}

.h-tb{

	writing-mode: horizontal-tb;

	background:tomato;

}

.v-rl{

	writing-mode: vertical-rl;

	background:skyblue;

}

min-block-size, min-inline-size

min-height、min-widthの代用。

//css

.min-size > div{

	min-block-size:100px;

	min-inline-size:200px;

}

max-block-size, max-inline-size

max-height、max-widthの代用。

//css

.max-size > div{

	max-block-size:20px;

	max-inline-size:50px;

}

block-size, inline-size

height、widthの代用。

//css

.size > div{

	block-size:80px;

	inline-size:160px;

}

padding-block, padding-inline

//css

.padding > div{

	padding-block:10px;

	padding-inline:20px;

}

margin-block, margin-inline

//css

.margin > div{

	margin-block:10px;

	margin-inline:20px;

}

inset-block, inset-inline

//css

.inset > div{

	position:relative;

	inset-block: 30px 50px;

	inset-inline: 10px 20px;

}

border-block, border-inline

//css

.border > div{

	border-block:5px solid lawngreen;

	border-inline:5px solid darkviolet;

}

border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

//css

.radius > div{

	border-start-start-radius:10px 20px;

	border-start-end-radius:0;

	border-end-start-radius:10px 20px;

	border-end-end-radius:20px;

}

scroll-padding-block, scroll-padding-inline & scroll-margin-block, scroll-margin-inline

これはscroll-snap-typeの要素に対して使うものである。(サンプル)

スクロールスナップの親要素にscroll-padding-xxxxxプロパティを使うことで子要素の始端および終端を変更することができる。このときに子要素に対してscroll-snap-alignプロパティで「start」もしくは「end」を設定しておく必要がある。

scroll-margin-xxxxxプロパティは親要素が設定したscroll-padding-xxxxxプロパティの始端および終端から子要素に距離をもたせたい場合に使う。