.foo {

   background-size: auto 100%;
}

 

 

css3-mediaquery 보다 훨씬 빠르고 잘된다.

 

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

  • Copyright 2011: Scott Jehl, scottjehl.com

  • Licensed under the MIT license.

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here

Demo page (the colors change to show media queries working)

Usage Instructions

  1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop

    @media screen and (min-width: 480px){
        ...styles for 480px and up go here
    }
    
  2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)

  3. Crack open Internet Explorer and pump fists in delight

CDN/X-Domain Setup

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

See cross-domain/example.html for a demo:

  • Upload cross-domain/respond-proxy.html to your external domain
  • Upload cross-domain/respond.proxy.gif to your origin domain
  • Reference the file(s) via <link /> element(s):
    <!-- Respond.js proxy on external server -->
    <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

    <!-- Respond.js redirect location on local server -->
    <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

    <!-- Respond.js proxy script on local server -->
    <script src="/path/to/respond.proxy.js"></script>

If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.

Note: HUGE thanks to @doctyper for the contributions in the cross-domain proxy!

Support & Caveats

Some notes to keep in mind:

  • This script's focus is purposely very narrow: only min-width and max-width media queries and all media types (screen, print, etc) are translated to non-supporting browsers. I wanted to keep things simple for filesize, maintenance, and performance, so I've intentionally limited support to queries that are essential to building a (mobile-first) responsive design. In the future, I may rework things a bit to include a hook for patching-in additional media query features - stay tuned!

  • Browsers that natively support CSS3 Media Queries are opted-out of running this script as quickly as possible. In testing for support, all other browsers are subjected to a quick test to determine whether they support media queries or not before proceeding to run the script. This test is now included separately at the top, and uses the window.matchMedia polyfill found here: https://github.com/paulirish/matchMedia.js . If you are already including this polyfill via Modernizr or otherwise, feel free to remove that part.

  • This script relies on no other scripts or frameworks (aside from the included matchMedia polyfill), and is optimized for mobile delivery (~1kb total filesize min/gzip)

  • As you might guess, this implementation is quite dumb in regards to CSS parsing rules. This is a good thing, because that allows it to run really fast, but its looseness may also cause unexpected behavior. For example: if you enclose a whole media query in a comment intending to disable its rules, you'll probably find that those rules will end up enabled in non-media-query-supporting browsers.

  • Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.

  • Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server.

  • If the request for the CSS file that includes MQ-specific styling is behind a redirect, Respond.js will fail silently. CSS files should respond with a 200 status.

  • Currently, media attributes on link elements are supported, but only if the linked stylesheet contains no media queries. If it does contain queries, the media attribute will be ignored and the internal queries will be parsed normally. In other words, @media statements in the CSS take priority.

  • Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 or IE8. Noted in issue #97

  • WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries.

  • If you have more than 32 stylesheets referenced, IE will throw an error, Invalid procedure call or argument. Concatenate your CSS and the issue should go away.

  • Sass/SCSS source maps are not supported; @media -sass-debug-info will break respond.js. Noted in issue #148

  • Internet Explorer 9 supports css3 media queries, but not within frames when the CSS containing the media query is in an external file (this appears to be a bug in IE9 — see http://stackoverflow.com/questions/10316247/media-queries-fail-inside-ie9-iframe). See this commit for a fix if you're having this problem. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603

  • Nested Media Queries are not supported

How's it work?

Basically, the script loops through the CSS referenced in the page and runs a regular expression or two on their contents to find media queries and their associated blocks of CSS. In Internet Explorer, the content of the stylesheet is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), so Respond.js re-requests the CSS files using Ajax and parses the text response from there. Be sure to configure your CSS files' caching properly so that this re-request doesn't actually go to the server, hitting your browser cache instead.

From there, each media query block is appended to the head in order via style elements, and those style elements are enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the browser width. The media attribute on the style elements will match that of the query in the CSS, so it could be "screen", "projector", or whatever you want. Any relative paths contained in the CSS will be prefixed by their stylesheet's href, so image paths will direct to their proper destination

API Options?

Sure, a couple:

  • respond.update() : rerun the parser (helpful if you added a stylesheet to the page and it needs to be translated)
  • respond.mediaQueriesSupported: set to true if the browser natively supports media queries.
  • respond.getEmValue() : returns the pixel value of one em

Alternatives to this script

This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)

 

https://github.com/louisremi/background-size-polyfill

 

 for IE8 that is really simple to use:

 

.selector {
background-size: cover;
behavior: url(/backgroundsize.min.htc);
}

 

'웹프로그래밍 > CSS' 카테고리의 다른 글

background-size cover only Y ?  (0) 2015.05.08
CSS3 for IE7, 8 {https://github.com/scottjehl/Respond/}  (0) 2015.04.27
Background-size for IE7,8  (0) 2015.04.24
CSS3 구조선택자  (0) 2015.04.24
CSS 동위선택자, 상태선택자  (0) 2015.04.24
CSS 속성선택자  (0) 2015.04.24

구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다.


1. 일반 구조 선택자

 선택자 형태

설명 

  :first-child

첫번째에 위치하는 자손을 선택

  :last-child

마지막에 위치하는 자손을 선택

  :nth-child(수열)

앞에서 수열 번째에 있는 자손을 선택  ex) nth-child(2n) , nth-child(2n+1

  :nth-last-child(수열)

뒤에서 수열 번째에 있는 자손을 선택 

 

 

 

<style type="text/css">

li{width:100px;list-style:none;padding:10px;}

li:first-child{border-radius:10px 10px 0 0;}

li:last-child{border-radius:0 0 10px 10px;}

li:nth-child(2n){background-color:#f6529d;}

li:nth-child(2n+1){background-color:#23c8b6;}

</style>

<body>

 

<ul>

<li>first</li>

<li>second</li>

<li>third</li>

<li>fourth</li>

<li>fifth</li>

<li>sixth</li>

<li>seventh</li>

</ul>

</body>





 

 

2. 형태 구조 선택자

 선택자 형태

설명 

  :first-of-type

자손 중에 첫번째로 등장하는 특정태그

  :last-of-type

자손 중에 마지막으로 등장하는 특정태그

  :nth-of-type(수열)

자손 중에 앞에서 수열 번째로 등장하는 특정 태그 선택

  :nth-last-of-type(수열)

자손 중에 뒤에서 수열 번째로 등장하는 특정 태그 선택

 


<style type="text/css">

h1:first-of-type{color:red;}

h2:first-of-type{color:red;}

h3:last-of-type{color:blue;}

</style>

<body>

<h1>header 1</h1>

<h2>header 2</h2>

<h3>header 3</h3>

<h3>header 3</h3>

<h2>header 2</h2>

<h1>header 1</h1>

</body>

1. 동위선택자

 선택자 형태

설명 

 선택자A + 선택자B 

선택자A 바로 뒤에 위치하는 선택자B 선택 

 선택자A ~ 선택자B 

선택자A뒤에 위치하는 선택자B 선택 

 


<style type="text/css">

h1+h2{color:red}

h1~h2{background-color:orange}

</style>


<h1>header-1</h1>

<h2>header-2</h2>

<h2>header-3</h2>

<h2>header-4</h2> 
 


 


 

2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자

  선택자 형태

설명 

 :checked 

체크상태의 input 태그 선택

 :focus

초점이 맞추어진 input 태그 선택

 :enabled

사용가능한 input 태그 선택 

 :disabled 

사용 불가능한 input 태그 선택 

1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택


img[alt]

img 중에 alt 속성을 가진 것만 찾는다.

input[type=password]

input 중에 type password 인 것만 찾는다.

div#header

아이디가 headerdiv 선택하는 같은 방법이다.

div[id=header] 

div[id="header"] 

 


2. 선택자[속성~=값] , 선택자[속성|=값] - 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함)


 img[alt~="test"]  <img src="aa.jpg" alt="test photo" /> test 뒤에 띄어쓰기가 있는경우도 찾는다.
 <img src="bb.jpg" alt="camera test" /> test 앞에 띄어쓰기가 있는경우도 찾는다. 
 img[alt|="test"]  <img src="aa.jpg" alt="test-photo" /> test 뒤에 - 있는 경우 찾는다.

 


3. 선택자[속성^=값] , 선택자[속성$=값] , 선택자[속성*=값]


선택자[속성^=값]

속성 중 값으로 시작하는 것 선택

 a[href="http://"]  a(anchor)에 요소 href 중에 속성명이 http:// 로 시작하는 것을 찾는다.

선택자[속성$=값] 

속성 중 값으로 끝나는 것 선택

img[src$=png] img src png로 끝나는 img만 선택

선택자[속성*=값]

속성 중 값을 조금이라도 포함되어있으면 선택

img[alt*=test] img alt 안에 test가 들어간 것 모두 선택

CSS3 gives us the ability to create rounded corners with the border-radius property. But as you might already know, this new feature is not recognized in Internet Explorer 8 (IE8) and its earlier versions. So when you apply CSS3 Border Radius to an element, it still appears as a box with pointed tips.

 

 

You may find a lot of different advice on the Internet suggesting you ignore IE8. You wish you could do so. But if you’re working on a website for a government institution or a bank, you may not have a choice. You still have to make the website look as nice as it does in modern browsers, which includes the ability to apply CSS3 Border Radius.

If you really have to make your website IE8-ready, while being able to use the CSS3 feature, we have just the tip for you.

CSS3Pie

CSS3Pie is a kind of polyfill for CSS3 decorative features. Aside from CSS3 Border Radius that we’re going to discuss in this article, CSS3Pie also supports Box Shadow and Gradients, though it’s limited to the Linear Gradient type.

Download CSS3Pie (here). Put it inside your project directory – I placed it in the css folder. As you can also see from the screenshot below, I’ve created one stylesheet as well as one HTML file.

 

 

Open the stylesheet in code editor and set one of the elements in the HTML file with rounded corners, like so:

1
2
3
4
5
6
7
8
.border-radius {
    height: 100px;
    width: 100px;
    background-color: #2ecc71;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

As the element’s width and height are both 100px, and the border-radius is set to 50px, the element will become a circle:

 

 

In IE8, as we expect, it would still be a square (sigh), but don’t worry.

 

 

To enable the rounded corner effect, insert this line: behavior: url(css/pie.htc);, like so.

1
2
3
4
5
6
7
8
9
.border-radius {
    height: 100px;
    width: 100px;
    background-color: #2ecc71;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    behavior: url(css/pie.htc);
}

Note that the file path in url()has to be either an absolute path or relative to the HTML file. You can also add this line in a separate file.

You may have a stylesheet that is designated for Internet Explorer. You can put behavior: url(css/pie.htc); within that file, but ensure that it’s declared within the same CSS selector, like so.

1
2
3
4
/* declared in ie.css */
.border-radius {
    behavior: url(css/pie.htc);
}

Refresh the page in IE8. The rounded corner should now come into effect (ta-da!). It should work in IE7 as well.

 

 

Troubleshooting

Internet Explorer may behave unexpectedly. If this does not work (maybe the rounded corner does not take effect, or the selected element has disappeared), adding the position and zoom property should solve the problem:

1
2
3
4
5
6
7
<style>
.border-radius {
    behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
    position: relative;
    zoom: 1;
}
</style>

Using CSS3 Pie in WordPress

You have finished putting your website in HTML form. You also utilize pie.htc in the website to enable CSS3 in IE8. At this stage, you are ready to transform the website into a functioning WordPress theme. In this case, as WordPress is dynamic, where pages may serve in different level URLs, we have to specify an absolute path.

You can either change the path in CSS like this:

1
2
3
4
5
.border-radius {
    behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc);
    position: relative;
    zoom: 1;
}

Or add internal styles in the header.php, this way:

1
2
3
4
5
6
7
<style>
.border-radius {
    behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
    position: relative;
    zoom: 1;
}
</style>

Final Thought

Having cool things such as CSS3 Border Radius work in IE8 is fascinating, and CSS3Pie makes that happen, while giving us one less reason to hate IE8.

작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다.

word-break


word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.


 

.selector {word-break:break-all;}


위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이 그림을 보시면 단번에 이해가 가실 것 입니다.


단어의 중간에서 줄바꿈이 되는 효과입니다. 이 것의 반대 속성은 nowrap, keep-all 등을 주면 된다는데 제가 실험해본 결과 잘 안되는 것 같습니다. 그래서 이번에 같이 소개할 white-space 를 사용하시면 됩니다.

white-space


white-space는 여러가지 값이 있는데, 정리를 해보자면 이렇습니다.

inherit  말그대로 상속 받는 것
normal  일반적인 것, default
nowrap  줄바꿈을 하지 않는다
pre  <pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line  마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap  pre-line 과 비슷

말로 길게 설명해 무엇합니까? 그렇다면 눈으로 확인해 봅시다.

HTML 마크업은 다음과 같이 했습니다. 줄바꿈은 왼쪽에 보이는 라인넘버에서 알 수 있듯이 2번 하였습니다. 다시말해 단락이 3개라는 뜻 입니다. 스타일은  넓이를 400px 을 주고 사방으로 padding 을 10px 씩 주었습니다.


일반적으로 랜더링하면 단어 단위로 줄바꿈이 된 형태로 나오게 되는데 여기에서 속서을 하나씩 주면 기능을 한 눈에 알 수 있습니다.

우선 inherit 은 상속되는 것이므로 넘어가고 (IE8에는 인식을 못한다고 합니다.) normal 은 기본인데 Original 과 동일하다고 보시면 됩니다. nowrap 속성을 주게되면 줄바꿈이 되지 않습니다.


그리고 pre 속성은 <pre> 태그와 동일한 역할을 합니다. 마크업에서 줄바꿈 (앤터) 해준 것을 적용해주는 것인데요, 여기서는 두번 줄바꿈을 하였기 때문에 3 단락으로 나뉘어져 있습니다. 그리고 width 를 넘어가는 텍스틑는 줄바꿈이 되지 않습니다.


다음으로 pre-line 속성을 주게되면 pre를 준 것과 같이 마크업에서 줄바꿈 한 부분에서도 줄바꿈이 되고, width 값을 넘어가는 부분에 대하여 줄바꿈이 됩니다.


per-wrap 속성을 주면 pre-line 을 적용해준 것과 동일한 결과가 나오는데 구체적인 차이는 잘 모르겠습니다. 자세한 내용은 w3cschool 을 참조해 보시는 것이 더 좋을 듯 합니다.

+ Recent posts