title: understanding complex media query that checks for css property support
body: <p>hey guys i came across the following media queries in bootstrap : </p>
  
  <pre><code>@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner &gt; .item {
      -webkit-transition: -webkit-transform 0.6s ease-in-out;
      -o-transition: -o-transform 0.6s ease-in-out;
      transition: transform 0.6s ease-in-out;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 1000;
      perspective: 1000;
    }
  </code></pre>
  
  <p>and i was totally taken aback ! as i have no idea , what these media queries are doing ? no asking one of my seniour colleagues , i got the following asnwer : </p>
  
  <blockquote>
    <p>It is checking for css 3d transform support.</p>
  </blockquote>
  
  <p>and the following link :: </p>
  
  <p><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html" rel="nofollow">Link</a> , now in the link , i see the following information :: </p>
  
  <blockquote>
    <p>Be very careful when using these. It’s only a matter of time before
    we find a cheap device that doesn’t support, say, 3d-transitions but
    pretends it does because the vendor forgot to turn off this media
    query.</p>
  </blockquote>
  
  <p>now , my question is what qxactly are these media queries and are they reliable ? </p>
  
  <p>can somebody just tranlate this media query to how it would be read in plain english , my guess is it means the following :: </p>
  
  <p>"the media query applies to all device widths and heights and orientations(@media all) , now check if this device browser supports tranform3d property or  -webkittransform3d" . </p>
  
  <p>can somebody demistify this for me . </p>