WordPress.org

Make WordPress Core

Changeset 22629


Ignore:
Timestamp:
11/17/12 06:50:08 (17 months ago)
Author:
nacin
Message:

Introduce a new, cross-browser HiDPI CSS @media rule to be used everywhere.

@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {

Serve HiDPI graphics for printing, regardless of screen resolution.

Specify Opera's vendor-prefixed device pixel ratio property, for Opera desktop.

Specify a minimum Webkit device pixel ratio of 1.25 instead of 1.5, to serve
2x images to Android devices that are between 1 and 1.5x (like the Nexus 7).
Firefox and Opera will respond to 1.5x on these devices, but Chrome will not.

Specify min-resolution, which covers Firefox 19. Opera on Android also supports
min-resolution, but Opera Mini does not support dppx, so the dpi unit is used.

props iammattthomas for the exhaustive research.
props lessbloat for patching.

fixes #22238.

Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/colors-classic.css

    r22582 r22629  
    20242024 * HiDPI Displays 
    20252025 */ 
    2026 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     2026@media print, 
     2027  (-o-min-device-pixel-ratio: 5/4), 
     2028  (-webkit-min-device-pixel-ratio: 1.25), 
     2029  (min-resolution: 120dpi) { 
    20272030 
    20282031    .curtime #timestamp { 
  • trunk/wp-admin/css/colors-fresh.css

    r22582 r22629  
    18941894 * HiDPI Displays 
    18951895 */ 
    1896 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     1896@media print, 
     1897  (-o-min-device-pixel-ratio: 5/4), 
     1898  (-webkit-min-device-pixel-ratio: 1.25), 
     1899  (min-resolution: 120dpi) { 
    18971900 
    18981901    .curtime #timestamp { 
  • trunk/wp-admin/css/install.css

    r22419 r22629  
    7575    display: block; 
    7676} 
    77 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     77@media print, 
     78  (-o-min-device-pixel-ratio: 5/4), 
     79  (-webkit-min-device-pixel-ratio: 1.25), 
     80  (min-resolution: 120dpi) { 
    7881    #logo a { 
    7982        background-image: url('../images/wordpress-logo-2x.png?ver=20120412'); 
  • trunk/wp-admin/css/media.css

    r22281 r22629  
    327327 * HiDPI Displays 
    328328 */ 
    329 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     329@media print, 
     330  (-o-min-device-pixel-ratio: 5/4), 
     331  (-webkit-min-device-pixel-ratio: 1.25), 
     332  (min-resolution: 120dpi) { 
    330333 
    331334    .image-align-none-label { 
  • trunk/wp-admin/css/wp-admin-rtl.css

    r22536 r22629  
    23832383 * HiDPI Displays 
    23842384 */ 
    2385 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     2385@media print, 
     2386  (-o-min-device-pixel-ratio: 5/4), 
     2387  (-webkit-min-device-pixel-ratio: 1.25), 
     2388  (min-resolution: 120dpi) { 
    23862389    .post-com-count { 
    23872390        background-image: url('../images/bubble_bg-rtl-2x.gif'); 
  • trunk/wp-admin/css/wp-admin.css

    r22627 r22629  
    23632363} 
    23642364 
    2365 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    2366     .welcome-panel .welcome-add-page { 
    2367         background: url('../images/welcome-icons-2x.png') no-repeat 0 -1px; 
    2368         background-size: 16px; 
    2369     } 
    2370  
    2371     .welcome-panel .welcome-edit-page { 
    2372         background: url('../images/welcome-icons-2x.png') no-repeat 0px -92px; 
    2373         background-size: 16px; 
    2374     } 
    2375  
    2376     .welcome-panel .welcome-learn-more { 
    2377         background: url('../images/welcome-icons-2x.png') no-repeat 0px -138px; 
    2378         background-size: 16px; 
    2379     } 
    2380  
    2381     .welcome-panel .welcome-comments { 
    2382         background: url('../images/welcome-icons-2x.png') no-repeat 0px -184px; 
    2383         background-size: 16px; 
    2384     } 
    2385  
    2386     .welcome-panel .welcome-view-site { 
    2387         background: url('../images/welcome-icons-2x.png') no-repeat 0px -276px; 
    2388         background-size: 16px; 
    2389     } 
    2390  
    2391     .welcome-panel .welcome-widgets-menus { 
    2392         background: url('../images/welcome-icons-2x.png') no-repeat 1px -230px; 
    2393         background-size: 16px; 
    2394     } 
    2395  
    2396     .welcome-panel .welcome-write-blog { 
    2397         background: url('../images/welcome-icons-2x.png') no-repeat 0px -46px; 
    2398         background-size: 16px; 
    2399     } 
    2400 } 
    2401  
    24022365.welcome-panel .welcome-panel-column ul { 
    24032366    margin: 0.8em 1em 1em 0; 
     
    24382401    .welcome-panel .welcome-write-blog { 
    24392402        padding-left: 25px; 
    2440     } 
    2441 } 
    2442  
    2443 /** 
    2444  * HiDPI Displays 
    2445  */ 
    2446 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    2447  
    2448     .welcome-panel .welcome-panel-close:before { 
    2449         background-image: url('../images/xit-2x.gif'); 
    2450         background-size: 20px auto; 
    24512403    } 
    24522404} 
     
    42024154} 
    42034155 
    4204 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    4205     .spinner, 
    4206     .imgedit-wait, 
    4207     .customize-loading #customize-container { 
    4208         background-image: url(../images/wpspin_light-2x.gif); 
    4209     } 
    4210 } 
    4211  
    42124156.no-float { 
    42134157    float: none; 
     
    44024346    margin-bottom: 8px; 
    44034347    padding: 2px 10px; 
    4404 } 
    4405  
    4406 /** 
    4407  * HiDPI Displays 
    4408  */ 
    4409 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    4410     .imgedit-crop, 
    4411     .imgedit-rleft, 
    4412     .imgedit-rright, 
    4413     .imgedit-flipv, 
    4414     .imgedit-fliph, 
    4415     .imgedit-undo, 
    4416     .imgedit-redo { 
    4417         background-image: url('../images/imgedit-icons-2x.png'); 
    4418         background-size: 260px 64px; 
    4419     } 
    44204348} 
    44214349 
     
    51385066} 
    51395067 
    5140 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    5141     .pressthis a span { 
    5142         background-image: url(../images/press-this-2x.png?v=20121105); 
    5143     } 
    5144 } 
    5145  
    51465068/*------------------------------------------------------------------------------ 
    51475069  20.0 - Settings 
     
    56905612} 
    56915613 
    5692 /** 
    5693  * HiDPI Displays 
    5694  */ 
    5695 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    5696  
    5697     .wp-full-overlay .collapse-sidebar-arrow { 
    5698         background-image: url('../images/arrows-2x.png'); 
    5699         background-size: 15px 123px; 
    5700      } 
    5701 } 
    5702  
    57035614 
    57045615/*------------------------------------------------------------------------------ 
     
    66446555    padding-bottom: 15px; 
    66456556    display: block; 
    6646 } 
    6647  
    6648 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    6649     .login h1 a { 
    6650         background-image: url('../images/wordpress-logo-2x.png?ver=20120412'); 
    6651         background-size: 274px 63px; 
    6652     } 
    6653  
    6654     .wp-badge { 
    6655         background-image: url('../images/wp-badge-2x.png?ver=20120516'); 
    6656         background-size: 173px 194px; 
    6657     } 
    66586557} 
    66596558 
     
    84308329 * HiDPI Displays 
    84318330 */ 
    8432 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     8331@media print, 
     8332  (-o-min-device-pixel-ratio: 5/4), 
     8333  (-webkit-min-device-pixel-ratio: 1.25), 
     8334  (min-resolution: 120dpi) { 
    84338335 
    84348336    .press-this .tagchecklist span a { 
     
    84788380        background: url('../images/stars-2x.png?ver=20121108') repeat-x top left; 
    84798381        background-size: 21px 37px; 
     8382    } 
     8383     
     8384    .welcome-panel .welcome-panel-close:before { 
     8385        background-image: url('../images/xit-2x.gif'); 
     8386        background-size: 20px auto; 
     8387    } 
     8388     
     8389    .welcome-panel .welcome-add-page { 
     8390        background: url('../images/welcome-icons-2x.png') no-repeat 0 -1px; 
     8391        background-size: 16px; 
     8392    } 
     8393 
     8394    .welcome-panel .welcome-edit-page { 
     8395        background: url('../images/welcome-icons-2x.png') no-repeat 0px -92px; 
     8396        background-size: 16px; 
     8397    } 
     8398 
     8399    .welcome-panel .welcome-learn-more { 
     8400        background: url('../images/welcome-icons-2x.png') no-repeat 0px -138px; 
     8401        background-size: 16px; 
     8402    } 
     8403 
     8404    .welcome-panel .welcome-comments { 
     8405        background: url('../images/welcome-icons-2x.png') no-repeat 0px -184px; 
     8406        background-size: 16px; 
     8407    } 
     8408 
     8409    .welcome-panel .welcome-view-site { 
     8410        background: url('../images/welcome-icons-2x.png') no-repeat 0px -276px; 
     8411        background-size: 16px; 
     8412    } 
     8413 
     8414    .welcome-panel .welcome-widgets-menus { 
     8415        background: url('../images/welcome-icons-2x.png') no-repeat 1px -230px; 
     8416        background-size: 16px; 
     8417    } 
     8418 
     8419    .welcome-panel .welcome-write-blog { 
     8420        background: url('../images/welcome-icons-2x.png') no-repeat 0px -46px; 
     8421        background-size: 16px; 
     8422    } 
     8423     
     8424    .login h1 a { 
     8425        background-image: url('../images/wordpress-logo-2x.png?ver=20120412'); 
     8426        background-size: 274px 63px; 
     8427    } 
     8428 
     8429    .wp-badge { 
     8430        background-image: url('../images/wp-badge-2x.png?ver=20120516'); 
     8431        background-size: 173px 194px; 
     8432    } 
     8433     
     8434    .wp-full-overlay .collapse-sidebar-arrow { 
     8435        background-image: url('../images/arrows-2x.png'); 
     8436        background-size: 15px 123px; 
     8437     } 
     8438      
     8439    .pressthis a span { 
     8440        background-image: url(../images/press-this-2x.png?v=20121105); 
     8441    } 
     8442     
     8443    .imgedit-crop, 
     8444    .imgedit-rleft, 
     8445    .imgedit-rright, 
     8446    .imgedit-flipv, 
     8447    .imgedit-fliph, 
     8448    .imgedit-undo, 
     8449    .imgedit-redo { 
     8450        background-image: url('../images/imgedit-icons-2x.png'); 
     8451        background-size: 260px 64px; 
     8452    } 
     8453     
     8454    .spinner, 
     8455    .imgedit-wait, 
     8456    .customize-loading #customize-container { 
     8457        background-image: url(../images/wpspin_light-2x.gif); 
    84808458    } 
    84818459} 
  • trunk/wp-includes/css/admin-bar.css

    r22481 r22629  
    407407} 
    408408 
    409 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    410     #wpadminbar .quicklinks li div.blavatar { 
    411         background: url('../images/wpmini-blue-2x.png') no-repeat; 
    412         background-size: 16px 16px; 
    413     } 
    414 } 
    415  
    416409/** 
    417410 * Search 
     
    601594 * Retina display 2x icons 
    602595 */ 
    603 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     596@media print, 
     597  (-o-min-device-pixel-ratio: 5/4), 
     598  (-webkit-min-device-pixel-ratio: 1.25), 
     599  (min-resolution: 120dpi) { 
    604600    #wpadminbar .menupop .menupop > .ab-item, 
    605601    #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item, 
     
    611607        background-image: url(../images/admin-bar-sprite-2x.png?d=20120830); 
    612608        background-size: 20px 220px; 
     609    } 
     610     
     611    #wpadminbar .quicklinks li div.blavatar { 
     612        background: url('../images/wpmini-blue-2x.png') no-repeat; 
     613        background-size: 16px 16px; 
    613614    } 
    614615} 
  • trunk/wp-includes/css/editor.css

    r22439 r22629  
    20282028 
    20292029/* HiDPI */ 
    2030 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     2030@media print, 
     2031  (-o-min-device-pixel-ratio: 5/4), 
     2032  (-webkit-min-device-pixel-ratio: 1.25), 
     2033  (min-resolution: 120dpi) { 
    20312034    .wp_themeSkin span.mce_undo, 
    20322035    .wp_themeSkin span.mce_redo, 
  • trunk/wp-includes/css/wp-pointer.css

    r22439 r22629  
    190190 * HiDPI Displays 
    191191 */ 
    192 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     192@media print, 
     193  (-o-min-device-pixel-ratio: 5/4), 
     194  (-webkit-min-device-pixel-ratio: 1.25), 
     195  (min-resolution: 120dpi) { 
    193196 
    194197    .wp-pointer-buttons a.close:before { 
  • trunk/wp-includes/js/thickbox/thickbox.css

    r22378 r22629  
    168168} 
    169169 
    170 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     170@media print, 
     171  (-o-min-device-pixel-ratio: 5/4), 
     172  (-webkit-min-device-pixel-ratio: 1.25), 
     173  (min-resolution: 120dpi) { 
    171174    .tb-close-icon { 
    172175        background: url('tb-close-2x.png') no-repeat; 
  • trunk/wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css

    r22586 r22629  
    413413} 
    414414 
    415 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 
     415/** 
     416 * Retina display 2x icons 
     417 */ 
     418@media print, 
     419  (-o-min-device-pixel-ratio: 5/4), 
     420  (-webkit-min-device-pixel-ratio: 1.25), 
     421  (min-resolution: 120dpi) { 
    416422    .image-align-none-label { 
    417423        background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left; 
Note: See TracChangeset for help on using the changeset viewer.