Example

Specify the size of a background image with "auto" and in pixels:

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

Default value:Inherited:Animatable:Version:JavaScript syntax:

auto
no
yes. Read about animatableTry it
CSS3
object.style.backgroundSize="60px 120px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property

background-size  4.0
1.0 -webkit-
9.0 4.0
3.6 -moz-
4.1
3.0 -webkit-
10.5
10.0 -o-

 


CSS Syntax

background-size: auto|length|cover|contain|initial|inherit;

Property Values

ValueDescriptionPlay it

auto Default value. The background image is displayed in its original size Play it »
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units Play it »
percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" Play it »
cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges Play it »
contain Resize the background image to make sure the image is fully visible Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify the size of a background image with percent:

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

Try it Yourself »

Example

Specify the size of a background image with "cover":

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Try it Yourself »

Example

Specify the size of a background image with "contain":

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

Try it Yourself »

Example

Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover":

#example1 {
  background: url(img_tree.gif), url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain, cover;
}

Try it Yourself »

Example

Use different background properties to create a "hero" image:

.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

'WEB > CSS' 카테고리의 다른 글

CSS background-size Property  (0) 2019.07.05
CSS 입력시 주의사항  (0) 2019.05.03
How to bring navigation div to the front  (0) 2019.05.01
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

.wpfm-nav.wpfm-nav-show-hide{
display: block !important;
}

 

.wpfm-nav .wpfm-nav-show-hide{
display: block !important;
}

가 있다면 위의 2가지는 전혀 다른 CSS 의 양상을 보이게 된다.

 

특히 연속된 Class의 경우 wpfm-nav wpfm-nav-show-hide 와 같이 써져있는 경우가 있는데

이는 이어지는 Class 속성이므로 반드시 붙여서 쓰도록 해야 적용이된다.

'WEB > CSS' 카테고리의 다른 글

CSS background-size Property  (0) 2019.07.05
CSS 입력시 주의사항  (0) 2019.05.03
How to bring navigation div to the front  (0) 2019.05.01
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

-1

1

i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements. any help with this matter will be greatly appreciated, below is all the code.

* { margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; } p, h5 { margin-bottom: 10px; line-height: 1.5; } h5 { text-align: center; border: 1px solid #ccc; border-width: 1px 0; } h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; } .nav a { text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .nav a:hover { background-color: #005f5f; } .nav a.active { background-color: #fff; color: #444; cursor: default; } /* Option 1 - Display Inline */ .nav li { display: inline-block; margin-right: -4px; } <h5> <div class="nav"> <ul> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a class="active" href="#">Tutorials</a></li> <li class="about"><a href="#">About</a></li> <li class="news"><a href="#">Newsletter</a></li> <li class="contact"><a href="#">Contact</a></li> </ul> </div> </h5>

 Run code snippet

Expand snippet

html css

shareimprove this question

edited Dec 20 '15 at 17:28

 

asked Dec 20 '15 at 17:08

Josh

46210

add a comment

4 Answers

activeoldestvotes

2

 

There are few issues in you code. I could not understand why you using h5 in fixed div. To solve issue try this

h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; z-index:999; }

But my suggestion is use some better way to implement fixed top menu. Please check this example https://getbootstrap.com/examples/navbar-fixed-top/

shareimprove this answer

answered Dec 20 '15 at 17:20

Manish Shukla

1,1722721

  •  

    This solved my problem! works perfectly, thank you and ill take your advice on board and look into that. Thank you again! – Josh Dec 20 '15 at 17:31

 

https://stackoverflow.com/questions/34383547/how-to-bring-navigation-div-to-the-front

'WEB > CSS' 카테고리의 다른 글

CSS background-size Property  (0) 2019.07.05
CSS 입력시 주의사항  (0) 2019.05.03
How to bring navigation div to the front  (0) 2019.05.01
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.

 

# Example 1

@media screen (min-width: 1024px) {
   color: #000;
}

 

 

# Example 2

@media only screen (min-width: 1024px) {
   color: #fff;
}



! @media only screen과 @media screen의 차이점먼저 해당하는 두 코드를 사용했을때 각각의 화면에 나타나게 될 결과는 동일합니다. 하지만 차이점은 무엇일까요? 이 부분에 대하여 only 키워드를 사용한 경우 w3c에 따르면 예전의 user agents를 사용된 스타일 시트가 보이지 않도록 하는 역할을 한다고 합니다. 뭔가 클리어 하지는 않지만 결론은 최근에 사용되는 환경에서 only를 사용하는 것과 사용하지 않는 것 문제가 발생되지 않습니다. 구 user agent 환경의 media 속성을 감추는... 즉 적용되지 않게 하는 것이 바로 only의 목적이라 볼 수 있습니다.

'WEB > CSS' 카테고리의 다른 글

CSS 입력시 주의사항  (0) 2019.05.03
How to bring navigation div to the front  (0) 2019.05.01
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

Box Shadow II

WEB/CSS 2018. 6. 7. 22:47

Box Shadows

Utilities for controlling the box shadow of an element.
ClassProperties
.shadowbox-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
.shadow-mdbox-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
.shadow-lgbox-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);
.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
.shadow-nonebox-shadow: none;

Outer shadow

Use the .shadow.shadow-md, or .shadow-lg utilities to apply different sized outer box shadows to an element.

.shadow
.shadow-md
.shadow-lg
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>

Inner shadow

Use the .shadow-inner utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

.shadow-inner
<div class="shadow-inner"></div>

No shadow

Use .shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

.shadow-none
<div class="shadow-none"></div>

Responsive

To control the shadow of an element at a specific breakpoint, add a {screen}: prefix to any existing shadow utility. For example, use md:shadow-lg to apply the shadow-lg utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Designdocumentation.

all

sm

md

lg

xl

<div class="shadow sm:shadow-md md:shadow-lg lg:shadow-inner xl:shadow-none ..."> <!-- ... --> </div>

Customizing

By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the shadows section of your Tailwind config.

If a default shadow is provided, it will be used for the non-suffixed .shadow utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding .shadow-2 utility.

{
// ...
shadows: {
-   default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-   'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-   'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-   'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+   '1': '0 2px 4px rgba(0,0,0,0.05)',
+   '2': '0 4px 8px rgba(0,0,0,0.1)',
+   '3': '0 8px 16px rgba(0,0,0,0.15)',
    'none': 'none',
}
}

Responsive and State Variants

By default, only responsive variants are generated for shadow utilities.

You can control which variants are generated for the shadow utilities by modifying the shadowsproperty in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
// ...
modules: {
    // ...
-   shadows: ['responsive'],
+   shadows: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the shadows property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   shadows: ['responsive'],
+   shadows: false,
}
}


'WEB > CSS' 카테고리의 다른 글

How to bring navigation div to the front  (0) 2019.05.01
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

Box-Shadow

WEB/CSS 2018. 6. 7. 22:45

박스 주위에 그림자 적용시에 box-shadow 속성을 사용합니다. 입체적으로 보이는 모양이 보기에도 좋아보입니다.

box-shadow 속성

아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다.

.shadow {

  -moz-box-shadow: 3px 3px 3px 3px #999;

  -webkit-box-shadow: 3px 3px 3px 3px #999;

  box-shadow: 3px 3px 3px 3px #999;

  }
첫 번째 값수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.
두 번째 값수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.
세 번째 값그림자의 흐림 반경(blur radius)을 나타냅니다. 음수 값을 지정할 수는 없습니다. 값이 클수록 그림자의 끝이 흐려지고, 값이 "0"이면 그림자 끝이 흐려지지 않고 선명한 그림자가 됩니다.
네 번째 값그림자의 확산 거리(Spread distance)를 나타냅니다. 양수 값을 지정하면 그림자의 전방위로 확대되고, 음수 값을 지정하면 그림자의 크기가 줄어 듭니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 붙습니다.
다섯 번째 값그림자의 색상 (color)을 지정합니다.

▼ 아래와 같이 3개의 도형에 각각 그림자를 붙여 보았습니다. first 박스에 양수 값을 주어 그림자를 붙였습니다.

second 박스에는 음수 값, third 박스에는 그림자의 확산 정도를 값 -1로 확인해 보았습니다.

그림자 붙이는 방법

.shadowbox {
  width:100px;
  height:100px; }
 
.first{
  border-radius:3px;
  box-shadow:3px 3px 3px 3px #999;}
   
.second{
  border-radius:50%;
  box-shadow:-3px -3px 3px 6px #093;}
 
.third{
  border-radius:3px;
  transform-origin:50% 50%;
  transform:rotate(20deg);
  box-shadow:3px 3px 0px -1px #F00;}

first
second
third

상자의 내부에 그림자 적용하기:inset

그림자의 흐림 정도를 적정하게 사용하면 그라데이션 효과를 낼 수 있습니다.

.inset-box {
  width:100px;
  height: 100px;
  border-radius:50%;
  border:1px solid #999;
  background:#FFF;
  box-shadow:inset 0 2px 45px #7c7c7e;
}

inset

픽셀을 겹쳐 쌓아 그림자 만들기

수평 방향의 값을 "0"으로 해 두고, 수직 방향으로 1 픽셀씩 증가시키먄사, 연한 색에서 점차 짙은 색으로 값을 지정합니다. 결과, 아래와 같이 입체적인 박스가 완성되었습니다.

.shadowbox {
  0 1px 1px #c0c0c0,
  0 2px 0 #a8a7a6,
  0 3px 0 #8b8a89,
  0 4px 0 #7d7b7a,
  0 5px 0 #686766,
  0 6px 3px #5f5e5d;
  }

픽셀을 겹쳐 쌓아 그림자 만들기

박스 외부와 내부의 그림자 맞추기

여러 값을 쉼표(,)로 구분하면서 지정합니다. 결과, 박스의 내부와 외부 모두에 그림자가 붙은 모습이 완성됐습니다.

.inset-shadowbox {
  0 1px 1px #c0c0c0,
  0 2px 0 #a8a7a6,
  0 3px 0 #8b8a89,
  0 4px 0 #7d7b7a,
  0 5px 0 #686766,
  0 6px 3px #5f5e5d,
  inset 1px 1px 50px #7c7c7e;
  }

겹쳐 쌓아 그림자 만들기

New
 
 
0
 
 
0
 
 
0
Blogger
 
0
Google +
 
0
Hatena
 
0
Pocket


'WEB > CSS' 카테고리의 다른 글

[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
Select box dir  (0) 2018.01.24
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

[CSS] text-justify

WEB/CSS 2018. 2. 5. 14:53

The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value.

p {
  text-align: justify;
  text-justify: inter-word;
}

#Values

  • inter-word: Specifies that text is justified by adjusting the spacing between words, effectively creating additional word spacing. This is effectively a variation of the word-spacingproperty.
  • inter-character: Specifies that text is justfiied by adjusting the spacing between characters, effectively creating additional character spacing. This is effectively a variation of the letter-spacing property.
  • auto: Allows the browser to determine whether justification is better handled as inter-word or inter-character. This can be helpful in multi-lingual scenarios where the content language is unknown until rendered, allowing the browser user agent to choose accordingly based on which method better fits the language context.
  • none: Disables justification methods, effectively removing any justification opportunities, or overriding where a justification method may occur in the cascade.

#What exactly is justification?

Justified text is a fancy way of saying how text fills the box that contains it. In fact, you may already be well acquainted with justifying text and don't even know it. If you have ever used text editing software like Word and Google Docs, then you might be familiar with these icons:

Text align and justification options in the Google Docs toolbar

Those first three set the text alignment, just like the CSS text-alignproperty, where the text can be aligned to the left, right or completely centered.

That fourth icon is the justify option and it tells the content to fill the entire width of the document so that each line is flush right to the edge, regardless of whether it affects the spacing between words.

Justifying content in Google Docs adds spacing between words to occupy the full document width at each line

The text-justify property allows us to do the same, but with additional flexibility to determine whether the spacing method used to justify the content is managed between words or characters.

#Browser Support

The text-justify property is included in the CSS Text Module Level 3 specification, which is currently in Editor's Draft status at the time of this writing.

This property is currently listed as "at risk" of being dropped in the Candidate Recommendation period. As such, it is not recommended to use this property in production as it is unlikely to be adopted as a standard across all browsers in the near future.

Current support is limited to Firefox 55+. Internet Explorer 11 and Edge 14+ also support the property, but only the inter-word value as well as unofficial values not included in the W3C specification.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#Desktop

ChromeOperaFirefoxIEEdgeSafari
NoNo551117No

#Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNoNoNo57


'WEB > CSS' 카테고리의 다른 글

Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
Select box dir  (0) 2018.01.24
[CSS] Vertical Align  (0) 2018.01.24
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요

<input type="number"> will open a numeric software keyboard on modern mobile operating systems. Not every user can input decimal numbers into this convenient field without proper localization. Half the world uses a comma and the other half uses a period as their decimal mark. (In Latin scripts.) Does your web application take that into consideration? Do the browsers?

Why <input type="number"> and what is the problem?

Touch software keyboards, or “soft keyboards”, can adapt to the input type that is requested from the user. If an email address is requested for a login, the soft keyboard can be made to include an at sign. For numeric input, the keyboard can include larger numbers like on a dialpad, a decimal mark, and a minus sign. These adaptive soft keyboards are a big convenience to users as they do not have to manually change the views of their already‐hard‐to‐use keyboard.

The problem with these soft keyboards and even with regular analog keyboards, is the decimal mark. Roughly half the world uses a comma as their decimal mark, and the other (mainly former colonies of the British Empire) uses a period instead.[1] In computing, decimal marks are usually presented in a way following the locale of system. However, the stored value in memory is always represented with a period.

Inputting an invalid value into a <input type="number"> will, as per the specification, set the value to an empty string. The value presented to the user will still be whatever they typed, but the form will not actually submit any data. This is a big usability as well as functional problem for web applications.

What does the W3C recommendation say?

The value of an <input type="number"> must always be either a valid integer (number) or a valid decimal number. The specification defines the decimal separator as a period regardless of the locale.[2] However, the value the user inputs or the value that is displayed to the user does not need to meet this technical requirement. The specification does not define how exactly this should be handled, but suggests the following:

“Browsers are encouraged to use user interfaces that present […] numbers according to the conventions of either the locale implied by the input element’s language or the user’s preferred locale. Using the page’s locale will ensure consistency with page‐provided data.” [3]

Additionally, all browsers except Internet Explorer will strip any whitespace characters and thousand separators (space, comma, or period depending on locale  —  see below) from the value.

Following this logic we can make a test[4] and get the following web browser support comparison chart:

Browser support

UI language refers to the user interface language of the browser or operating system as set by the user. Element language refers to the language of the form widget (<input type="number" lang="en-150">) or page (<html lang="en-150">) as set by the page author. In the table, European English represents the comma‐locales and English represent the period‐locales.

Recognized decimal marks
English UI and elementEnglish UI and European English elementEuropean English UI and elementEuropean English UI and English element
Desktop
Mozilla Firefox 49periodperiod and commaperiod and commaperiod
Google Chrome 45 (macOS)period and commaperiod and commaperiod and commaperiod
Google Chrome 45 (Linux/Windows)periodperiodperiodperiod
Opera 41periodperiodperiod and commaperiod
Safari 10 (macOS)period and comma
Microsoft Edge 15periodperiodperiodperiod
Internet Explorer 11Unsupported
Windows Phone 8 and 8.1
Internet Explorer Mobile 10 and 11Unsupported
iOS 8
Safari Mobileperiod and comma
Google Chrome
Opera Coast
WebView
Android 4.4 and 5, 6, 7
Mozilla Firefoxperiodperiodperiodperiod
Google Chromeperiodperiodperiod and commaperiod and comma
Opera Mobileperiodperiodperiod and commaperiod and comma
WebViewperiodperiodperiod and commaperiod and comma

See historic data from the above table in the Internet Archive, including older browser versions and their behavior.

I have not made any investigation into support of Arabic or other script’s decimal marks. I would expect the results to be similar or worse.

Notes on browser support

Those familiar with the browser landscape might recognize that Google led projects — Blink/Chromium (used by Chrome, Opera, Yandex, Vivaldi, and others) and Android — have the most problems. There is an ongoing discussion that holds promises for their implementations to be fixed. Even if that discussion bears fruits in the near future, end‐users will still encounter problems on older systems that do not necessarily receive updates.

Apple’s implementation in Safari and iOS is noteworthy. Instead of relying on hints from the locale or page author, the browser allows interchangeable use of commas and periods in all locales.

Internet Explorer does not support number inputs, as defined in the HTML5 recommendation. It does support bringing up numeric software keyboard if the input element sets its type to number. This is kind of okay, as user‐provided input can be validated and corrected with JavaScript or server‐side.

Recommendation for web authors

Set the form language explicit as an attribute of the input element or the form itself. For example, <input type="number" lang="en-150"> Web pages do not always set the language on their root element. For form input, this actually matters and setting it on the form or input element will help your users complete the task of filling in numbers.

I’m almost tempted to recommend you always set the input language of all <input type="number"> to a locale that uses commas to get both period and comma support. This could cause issues in the future if browsers decide to stop supporting periods when commas are expected. As of today, however, this is not the case but could change.

The value of an <input type="number"> is always — except in Internet Explorer — set to a valid decimal number. There is no way to read the raw value the user input. When an invalid value is provided, the display value is left as the user provided it. However, the value is cleared and set to an empty string. This is the expected behavior!

Some browsers will validate the input and confusingly show a red border around the input. Thus prompting the user to correct the input. This can be somewhat unclear to the user. Using JavaScript, the input element’s valid property from ValidityState can be tested. This can be used to display a custom error message, shake animation, or otherwise prompt the user to correct the information. Another way with more reliable support is to read the input element’s input event. Process the event by checking that the input element’s value is not an empty string and is a valid decimal number (for Internet Explorer and legacy browsers), and then prompt the user to provide a valid input. Using the input event is highly encouraged over other events (like key, paste, or change) as this support clipboard, keyboard, handwriting, IME, and other forms of input. Consider using the widely supported blur event as a fallback for legacy browsers, even though it is less reliable than the input event.

It is hard to instruct the user on what input is expected as you cannot test whether the form will be localized or not! Every browser supports input with a period as the decimal separator, so this can safely be used. To reduce the chance of errors, you could consider setting the input element’s placeholder attribute to a valid floating‐point number even when this does not match the user’s locale.

Having a fallback parsing in JavaScript is recommended as older browsers do not support numeric input types. Take care to ensure that any server validation is identical to the client-side validation done by the browser (with type="number") and in JavaScript.

Recommendation to implementors (browsers)

Please support period and commas used interchangeably as the decimal mark regardless of any locale hinting. Apple has got the right idea here!

When it comes to thousand separators[5], it is simply a matter of stripping out every decimal mark symbol (whether it be a period or a comma) except the last one. The International System of Units (SI) recommends using a space to group digits to reduce format confusion. After reading this article, I hope you agree.


'WEB > CSS' 카테고리의 다른 글

Box-Shadow  (0) 2018.06.07
[CSS] text-justify  (0) 2018.02.05
HTML5 number inputs – Comma and period as decimal marks  (0) 2018.01.24
Select box dir  (0) 2018.01.24
[CSS] Vertical Align  (0) 2018.01.24
[CSS]크로스 브라우징  (0) 2018.01.24
블로그 이미지

remoted

Remoted's IT LAB & POST DATABASE

댓글을 달아 주세요