2023/02/11 (更新日: 2023/02/25)

【My Study Load】CSS CODING

CSS Programming

CSS CODING

Basic

CSS SELECTOR

CSS [attribute*=value] Selector

div[class*="test"] {
  background: #ffff00;
}

Set a background color on all <div> elements that have a class attribute value containing “test”

Best Boxsizing Form

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

Troubleshooting

FLEXBOX

How to exclude a div (flex item) from flex calculations?

position: absolute;

If you specify the code above for the element that you want it to be uncountable, you can make it happen.

WEB BROWSER SPECIFICATION

How To Prevent Line Breaks Using CSS

white-space: nowrap;

This issue occurred on Safari.

Remove the background color from safari

-webkit-appearance: none;

Remove the background color from Firefox

background: none;

Placeholder text is lighter than other browser in firefox

input:-moz-placeholder,
input::-moz-placeholder {
    opacity: 1;
}

» Solution Page

RESPONSIVE DESIGN

How to fit the contents to the length of the iPhone browser

Useful Links

Solution

Use Innerheight in Javascript

Unlike "documentElement.clientHeight()", "window.innerHeight()" would exclude the height of address bar and staff. Which is why you can get the exact viewing size.

$(window).on('load', function () {
  var innerHeight = window.innerHeight;
  $('.piyo').css('height', innerHeight + 'px'); //piyoは任意の値に変えてください。
});

Plus, it’s better to use “dvh” for the height in CSS. (Code above didn’t work on safari mobile, but this worked instead, which means it might be better if we use both.)

現在（2022/06）はSafariとFirefoxのみがサポートとなっている機能ですが、「svh」「lvh」「dvh」を使うことでメニューバーの表示に左右されることなく理想の実装が可能です。
100svh：メニューバーが表示されていない際の画面を100%とする
100lvh：メニューバーが表示されている際の画面を100％とする
100dvh：メニューバーの表示/非表示によってsvh/lvhの可変になる

height: 100dvh;

CSS Programming

• Tweet
• LINE
• facebook