CSS3 @supports

4/Dic/2017 556

CSS @supports

CSS3 trae consigo un nuevo selector como parte del grupo condicional feature queries: @supports. Esta regla (no es en sí un selector) prueba si el browser soporta cierto par de propiedad: valor y los operadores AND, IN, OR.


Por ejemplo, si se quiere determinar si el browser soporta CSS Grids, se utiliza la nomenclatura como a continuación:

@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
  .column-one {
    grid-column: 1 / 3;
    grid-row: 1;

JS Bin on jsbin.com

Para algo más complejo, en el siguiente ejemplo preguntamos si el browser no soporta CSS Grids para entregar un fallaback:

@supports not (display: grid) {
  div { float: left; }


Actualmente su soporte es amplio en browsers modernos, salvo a la fecha de la excepción de IE11 el cual no tienen ningún soporte.

Screen Shot 2017-12-04 at 10.54.49


Esto es algo personal, pero este feature querie en específico me causa un regreso a la web que era reinada por los browsers y no por los estándares. Escribir código para navegadores específicos y dejar sin soporte a otros que no tienen las mismas características es volver un poco a la época de los Applets, prefijos -webkit -moz y otros. Ojalá sea sólo una impresión mía.



  1. kawhi leonard shoes [#]

    Thanks so much for providing individuals with an extremely special opportunity to read from this site. It really is so terrific and packed with fun for me personally and my office co-workers to visit your website minimum thrice in a week to read the new secrets you have. Of course, I am just certainly impressed with all the wonderful inspiring ideas you give. Some 4 points on this page are essentially the very best we have had.

  2. yeezy [#]

    I intended to post you one little bit of remark to be able to say thank you again for all the pretty tips you have provided in this article. This is certainly wonderfully open-handed with you to convey freely exactly what many of us might have offered for an e-book in order to make some bucks for themselves, chiefly now that you could have done it if you ever wanted. Those secrets likewise served like a fantastic way to be sure that many people have a similar desire just like my very own to grasp way more with regards to this condition. I’m certain there are millions of more enjoyable opportunities in the future for individuals who looked over your blog post.

  3. pg shoes [#]

    I and my pals were actually going through the great tips and hints found on your web blog while all of the sudden I had an awful feeling I had not expressed respect to the web blog owner for them. The men are actually consequently thrilled to read them and already have pretty much been enjoying them. We appreciate you simply being quite helpful as well as for opting for this sort of ideal themes most people are really eager to understand about. My honest apologies for not expressing gratitude to earlier.

  4. cheap jordans [#]

    I have to express some thanks to this writer for bailing me out of this scenario. As a result of surfing around through the internet and obtaining basics which were not productive, I believed my life was over. Existing without the strategies to the difficulties you’ve resolved by way of the blog post is a serious case, as well as those that might have in a wrong way affected my career if I hadn’t discovered your web site. Your primary mastery and kindness in touching the whole thing was tremendous. I’m not sure what I would have done if I had not come across such a subject like this. I’m able to at this point look forward to my future. Thanks for your time very much for this impressive and amazing help. I won’t be reluctant to endorse your blog to anyone who needs support on this subject matter.

  5. chrome hearts [#]

    I simply had to appreciate you yet again. I am not sure the things I might have taken care of without the recommendations shown by you relating to that subject matter. It had been an absolute terrifying situation for me personally, but observing a expert manner you resolved the issue took me to cry for fulfillment. I will be happy for the guidance and then believe you know what a great job you’re doing educating the mediocre ones with the aid of your site. I know that you’ve never come across any of us.

  6. off white [#]

    I must point out my appreciation for your generosity supporting those individuals that require assistance with this one area of interest. Your very own dedication to getting the solution all over appears to be rather helpful and has usually allowed women like me to reach their endeavors. Your amazing insightful suggestions can mean so much a person like me and additionally to my colleagues. Regards; from everyone of us.