Geek Answers Handbook

What are the implications of using an unsupported WebKit property?

I am interested in using -webkit-line-clamp in a hybrid iOS application.

I read Apple 's documentation on an unsupported property.

Can I use unsupported properties, or am I risking removing this feature in future implementations of webkit in mobile Safari and other browser implementations?

How to check the status of WebKit properties?

+4
source share
2 answers

While the design is still available for browsers that lack support for -webkit-line-clamp (ala border-radius ), it is not mentioned.

Have browsers changed their implementation or refused to support experimental properties in the past? Sure.

  • Safari's original implementation for gradients is very different from the current standard
  • WebKit browsers still support the column-break-before prefix property, which has been renamed break-before in the current standard.
  • WebKit browsers still support the properties of the 2009 Flexbox project, despite being fully completed at the end of 2012.

Fortunately, you can write your CSS in a way that works in browsers that support old and new implementations:

 .foo { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ }

In the future, we will have access to functional queries to determine whether the browser supports certain properties (Opera supports it now, Firefox will receive it soon: http://caniuse.com/#feat=css-featurequeries )

 @supports not (-webkit-line-clamp: somevalue) { // some styles for unsupported browsers }
+4
source

Chris Coyyer wrote an article on this topic: http://css-tricks.com/line-clampin/ And FTLabs creates a JS-Plugin for this: FTEllipsis They use it for the new Financial Times iPad web application - see http: // coding .smashingmagazine.com / 2013/05/23 / building-the-new-financial-times-web-app /

+2
source

More articles:


All Articles