WordPress.org
Get WordPress

Make WordPress Core

Changeset 22629


Ignore:
Timestamp:
11/17/2012 06:50:08 AM (11 years 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.