WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/13/2026 10:07:57 PM (2 months ago)
Author:
peterwilsoncc
Message:

General: Use legacy content properties for CSS icons.

In modern browsers the CSS content property provides alt text support for assistive technology in the form display / alt text. This introduces support for legacy browsers that do not support the new syntax.

CSS content properties take advantage of the CSS cascade and browsers ignoring values they don't understand by adding duplicate content properties in the form:

content: display;
content: display / alt text;

Modern browsers will use the second property, legacy browsers will use the first.

Follow-up to [60885] for #63603.

Props acmoifr, joedolson, jorbin, mydesign78, ov3rfly, peterwilsoncc, presskopp, sabernhardt, siliconforks, swissspidy, threadi, wildworks, wolf45.
Fixes #64350.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-widgets.css

    r60806 r61480  
    131131
    132132.move-widget:before {
     133    content: "\f504";
    133134    content: "\f504" / '';
    134135}
    … …  
    171172#customize-theme-controls .widget-area-select li:before {
    172173    display: none;
     174    content: "\f147";
    173175    content: "\f147" / '';
    174176    position: absolute;
    … …  
    293295
    294296#available-widgets .widget-title:before {
     297    content: "\f132";
    295298    content: "\f132" / '';
    296299    position: absolute;
    … …  
    309312
    310313/* dashicons-smiley */
    311 #available-widgets [class*="easy"] .widget-title:before { content: "\f328" / ''; top: -4px; }
     314#available-widgets [class*="easy"] .widget-title:before {
     315    content: "\f328";
     316    content: "\f328" / '';
     317    top: -4px;
     318}
    312319
    313320/* dashicons-star-filled */
    314321#available-widgets [class*="super"] .widget-title:before,
    315 #available-widgets [class*="like"] .widget-title:before { content: "\f155" / ''; top: -4px; }
     322#available-widgets [class*="like"] .widget-title:before {
     323    content: "\f155";
     324    content: "\f155" / '';
     325    top: -4px;
     326}
    316327
    317328/* dashicons-wordpress */
    318 #available-widgets [class*="meta"] .widget-title:before { content: "\f120" / ''; }
     329#available-widgets [class*="meta"] .widget-title:before {
     330    content: "\f120";
     331    content: "\f120" / '';
     332}
    319333
    320334/* dashicons-archive */
    321 #available-widgets [class*="archives"] .widget-title:before { content: "\f480" / ''; top: -4px; }
     335#available-widgets [class*="archives"] .widget-title:before {
     336    content: "\f480";
     337    content: "\f480" / '';
     338    top: -4px;
     339}
    322340
    323341/* dashicons-category */
    324 #available-widgets [class*="categor"] .widget-title:before { content: "\f318" / ''; top: -4px; }
     342#available-widgets [class*="categor"] .widget-title:before {
     343    content: "\f318";
     344    content: "\f318" / '';
     345    top: -4px;
     346}
    325347
    326348/* dashicons-admin-comments */
    327349#available-widgets [class*="comment"] .widget-title:before,
    328350#available-widgets [class*="testimonial"] .widget-title:before,
    329 #available-widgets [class*="chat"] .widget-title:before { content: "\f101" / ''; }
     351#available-widgets [class*="chat"] .widget-title:before {
     352    content: "\f101";
     353    content: "\f101" / '';
     354}
    330355
    331356/* dashicons-admin-post */
    332 #available-widgets [class*="post"] .widget-title:before { content: "\f109" / ''; }
     357#available-widgets [class*="post"] .widget-title:before {
     358    content: "\f109";
     359    content: "\f109" / '';
     360}
    333361
    334362/* dashicons-admin-page */
    335 #available-widgets [class*="page"] .widget-title:before { content: "\f105" / ''; }
     363#available-widgets [class*="page"] .widget-title:before {
     364    content: "\f105";
     365    content: "\f105" / '';
     366}
    336367
    337368/* dashicons-text */
    338 #available-widgets [class*="text"] .widget-title:before { content: "\f478" / ''; }
     369#available-widgets [class*="text"] .widget-title:before {
     370    content: "\f478";
     371    content: "\f478" / '';
     372}
    339373
    340374/* dashicons-admin-links */
    341 #available-widgets [class*="link"] .widget-title:before { content: "\f103" / ''; }
     375#available-widgets [class*="link"] .widget-title:before {
     376    content: "\f103";
     377    content: "\f103" / '';
     378}
    342379
    343380/* dashicons-search */
    344 #available-widgets [class*="search"] .widget-title:before { content: "\f179" / ''; }
     381#available-widgets [class*="search"] .widget-title:before {
     382    content: "\f179";
     383    content: "\f179" / '';
     384}
    345385
    346386/* dashicons-menu */
    347387#available-widgets [class*="menu"] .widget-title:before,
    348 #available-widgets [class*="nav"] .widget-title:before { content: "\f333" / ''; }
     388#available-widgets [class*="nav"] .widget-title:before {
     389    content: "\f333";
     390    content: "\f333" / '';
     391}
    349392
    350393/* dashicons-tagcloud */
    351 #available-widgets [class*="tag"] .widget-title:before { content: "\f479" / ''; }
     394#available-widgets [class*="tag"] .widget-title:before {
     395    content: "\f479";
     396    content: "\f479" / '';
     397}
    352398
    353399/* dashicons-rss */
    354 #available-widgets [class*="rss"] .widget-title:before { content: "\f303" / ''; top: -6px; }
     400#available-widgets [class*="rss"] .widget-title:before {
     401    content: "\f303";
     402    content: "\f303" / '';
     403    top: -6px;
     404}
    355405
    356406/* dashicons-calendar */
    357407#available-widgets [class*="event"] .widget-title:before,
    358 #available-widgets [class*="calendar"] .widget-title:before { content: "\f145" / ''; top: -4px;}
     408#available-widgets [class*="calendar"] .widget-title:before {
     409    content: "\f145";
     410    content: "\f145" / '';
     411    top: -4px;
     412}
    359413
    360414/* dashicons-format-image */
    … …  
    362416#available-widgets [class*="photo"] .widget-title:before,
    363417#available-widgets [class*="slide"] .widget-title:before,
    364 #available-widgets [class*="instagram"] .widget-title:before { content: "\f128" / ''; }
     418#available-widgets [class*="instagram"] .widget-title:before {
     419    content: "\f128";
     420    content: "\f128" / '';
     421}
    365422
    366423/* dashicons-format-gallery */
    367424#available-widgets [class*="album"] .widget-title:before,
    368 #available-widgets [class*="galler"] .widget-title:before { content: "\f161" / ''; }
     425#available-widgets [class*="galler"] .widget-title:before {
     426    content: "\f161";
     427    content: "\f161" / '';
     428}
    369429
    370430/* dashicons-format-video */
    371431#available-widgets [class*="video"] .widget-title:before,
    372 #available-widgets [class*="tube"] .widget-title:before { content: "\f126" / ''; }
     432#available-widgets [class*="tube"] .widget-title:before {
     433    content: "\f126";
     434    content: "\f126" / '';
     435}
    373436
    374437/* dashicons-format-audio */
    375438#available-widgets [class*="music"] .widget-title:before,
    376439#available-widgets [class*="radio"] .widget-title:before,
    377 #available-widgets [class*="audio"] .widget-title:before { content: "\f127" / ''; }
     440#available-widgets [class*="audio"] .widget-title:before {
     441    content: "\f127";
     442    content: "\f127" / '';
     443}
    378444
    379445/* dashicons-admin-users */
    … …  
    384450#available-widgets [class*="subscriber"] .widget-title:before,
    385451#available-widgets [class*="profile"] .widget-title:before,
    386 #available-widgets [class*="grofile"] .widget-title:before { content: "\f110" / ''; }
     452#available-widgets [class*="grofile"] .widget-title:before {
     453    content: "\f110";
     454    content: "\f110" / '';
     455}
    387456
    388457/* dashicons-cart */
    389458#available-widgets [class*="commerce"] .widget-title:before,
    390459#available-widgets [class*="shop"] .widget-title:before,
    391 #available-widgets [class*="cart"] .widget-title:before { content: "\f174" / ''; top: -4px; }
     460#available-widgets [class*="cart"] .widget-title:before {
     461    content: "\f174";
     462    content: "\f174" / '';
     463    top: -4px;
     464}
    392465
    393466/* dashicons-shield */
    394467#available-widgets [class*="secur"] .widget-title:before,
    395 #available-widgets [class*="firewall"] .widget-title:before { content: "\f332" / ''; }
     468#available-widgets [class*="firewall"] .widget-title:before {
     469    content: "\f332";
     470    content: "\f332" / '';
     471}
    396472
    397473/* dashicons-chart-bar */
    398474#available-widgets [class*="analytic"] .widget-title:before,
    399475#available-widgets [class*="stat"] .widget-title:before,
    400 #available-widgets [class*="poll"] .widget-title:before { content: "\f185" / ''; }
     476#available-widgets [class*="poll"] .widget-title:before {
     477    content: "\f185";
     478    content: "\f185" / '';
     479}
    401480
    402481/* dashicons-feedback */
    403 #available-widgets [class*="form"] .widget-title:before { content: "\f175" / ''; }
     482#available-widgets [class*="form"] .widget-title:before {
     483    content: "\f175";
     484    content: "\f175" / '';
     485}
    404486
    405487/* dashicons-email-alt */
    … …  
    407489#available-widgets [class*="news"] .widget-title:before,
    408490#available-widgets [class*="contact"] .widget-title:before,
    409 #available-widgets [class*="mail"] .widget-title:before { content: "\f466" / ''; }
     491#available-widgets [class*="mail"] .widget-title:before {
     492    content: "\f466";
     493    content: "\f466" / '';
     494}
    410495
    411496/* dashicons-share */
    412497#available-widgets [class*="share"] .widget-title:before,
    413 #available-widgets [class*="socia"] .widget-title:before { content: "\f237" / ''; }
     498#available-widgets [class*="socia"] .widget-title:before {
     499    content: "\f237";
     500    content: "\f237" / '';
     501}
    414502
    415503/* dashicons-translation */
    416504#available-widgets [class*="lang"] .widget-title:before,
    417 #available-widgets [class*="translat"] .widget-title:before { content: "\f326" / ''; }
     505#available-widgets [class*="translat"] .widget-title:before {
     506    content: "\f326";
     507    content: "\f326" / '';
     508}
    418509
    419510/* dashicons-location-alt */
    420511#available-widgets [class*="locat"] .widget-title:before,
    421 #available-widgets [class*="map"] .widget-title:before { content: "\f231" / ''; }
     512#available-widgets [class*="map"] .widget-title:before {
     513    content: "\f231";
     514    content: "\f231" / '';
     515}
    422516
    423517/* dashicons-download */
    424 #available-widgets [class*="download"] .widget-title:before { content: "\f316" / ''; }
     518#available-widgets [class*="download"] .widget-title:before {
     519    content: "\f316";
     520    content: "\f316" / '';
     521}
    425522
    426523/* dashicons-cloud */
    427 #available-widgets [class*="weather"] .widget-title:before { content: "\f176" / ''; top: -4px;}
     524#available-widgets [class*="weather"] .widget-title:before {
     525    content: "\f176";
     526    content: "\f176" / '';
     527    top: -4px;
     528}
    428529
    429530/* dashicons-facebook */
    430 #available-widgets [class*="facebook"] .widget-title:before { content: "\f304" / ''; }
     531#available-widgets [class*="facebook"] .widget-title:before {
     532    content: "\f304";
     533    content: "\f304" / '';
     534}
    431535
    432536/* dashicons-twitter */
    433537#available-widgets [class*="tweet"] .widget-title:before,
    434 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301" / ''; }
     538#available-widgets [class*="twitter"] .widget-title:before {
     539    content: "\f301";
     540    content: "\f301" / '';
     541}
    435542
    436543@media screen and (max-height: 700px) and (min-width: 981px) {
Note: See TracChangeset for help on using the changeset viewer.