-ms-interpolation-mode в CSS


Содержание

-ms-interpolation-mode

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0 8.0+

Краткая информация

Значение по умолчанию nearest-neighbor для IE7; bicubic для IE8 и старше
Наследуется Нет
Применяется К изображениям

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

-ms-interpolation-mode указывает браузеру, какой алгоритм использовать при масштабировании картинок. Это нестандартное свойство и поддерживается только браузером Internet Explorer начиная с версии 7.0.

Синтаксис

-ms-interpolation-mode: bicubic | nearest-neighbor

Значения

Влияние разных значений на вид изображения при увеличении его масштаба показано на рис. 1.

Рис. 1. Результат применения методов интерполяции

HTML5 CSS 2.1 CSS 3 IE 9 Cr 15 Op 11 Sa 5 Fx 8

Браузеры

Браузер Internet Explorer 7 применяет свойство — ms-interpolation-mode только к изображениям без прозрачности.

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : -ms-interpolation-mode

смотрим также

Материал из Справочник Web-языков

Содержание

Атрибут -ms-interpolation-mode | Свойство msInterpolationMode

Задает режим интерполяции при масштабировании изображений.

Синтаксис

HTML
Скрипты [ sMode = ] object.style.msInterpolationMode[=v]

Используемые значения

sMode Строка, которая может определять и принимать одно из следующих значений:

nearest-neighbor Менее качественный метод интерполяции по ближайшему соседнему. bicubic Высококачественный метод бикубической интерполяции.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значения по умолчанию нет. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Поддержка свойства msInterpolationMode была реализована в Internet Explorer 7.0.

Свойство применяется только к растягиваемым изображениям. Например, размер рисунка 200*200 пикселей, а дизайнер сайта определил, что рисунок на странице должен быть размером 400*400. Тогда это изображение будет растянуто по алгоритму ближайшего соседнего, если не указано иное значение.

Если масштаб страницы задан 100%, то используется метод интерполяции по ближайшему соседнему, иначе — бикубическая.

Примеры

В примере показано как применять атрибут -ms-interpolation-mode для вычисления алгоритма ресемплирования (увеличения числа пикселей в изображении).

2.1.1.22 -ms-interpolation-mode

Note: Not available in EdgeHTML Mode

msInterpolationMode of type DOMString , read/write

Sets or retrieves the interpolation (resampling) method used to stretch images. This property has no default value.

depends on user-agent

stretched and zoomed images

Values have the following meaning:

Use nearest-neighbor (low-quality) interpolation.

Use bicubic (high-quality) interpolation.

Note In Windows Internet Explorer 7 at 100% zoom level, the default interpolation is nearest-neighbor ; otherwise, bicubic mode is used. In Windows Internet Explorer 8, bicubic is always used.

Mailchimp

Email Design Reference

Client-specific CSS Styles

Some email clients require an extra push in order to get them to behave the way we need. For the most part, overriding those pesky default style rules is a simple proposition, requiring extra style declarations and a !important or two. There are instances where client styles can’t be overridden at all, or only with hacky work-arounds. We’ll detail here, client by client, the things you’ll need to be aware of.

Outlook.com / Hotmail

.ExternalClass Class Override

When an email is pulled into Outlook.com / Hotmail, any style rules present in the email are appended with .ExternalClass. Normalizing a few of these can help create a baseline for you to work from.

Color Override

Outlook.com / Hotmail sets its own (gross green) color on heading elements lower in level than an

Outlook 2007 / 2010 / 2013

It’s possible, in Outlook, to trigger the appearance of a fairly prominent “View this email in your browser” bar within the application, allowing you to drive people to view your email in a browser which will render it in a much better way than Outlook ever can.

Element Spacing

Outlook can sometimes add a bit of spacing on the left and right side of a element that can cause some layout-related headaches. By using the vendor-specific mso-table-lspace and mso-table-rspace CSS properties, you can be rid of those spaces and continue on to tackle the million other problems caused by Outlook.

Image Resizing

Using width or height tags to resize images in your markup can create a problem in Internet Explorer browsers. If your reader is viewing an email in-browser, and that email happens to have fluid images in it, they’ll look pretty ugly as they resize. Using -ms-interpolation-mode:bicubic; ensures that your images look a little better.

OSX / iOS

WebKit Text Size Adjustment

WebKit looks for any text that happens to be sized smaller than 13px and increases it to that number, which can sometimes cause design issues in places intended for small text. Setting -webkit-text-size-adjust to none will prevent iOS platforms from resizing the text, but this method also prevents OSX applications like Safari from bumping the text size up — something that can cause issues for people who need the text size to be large. Setting -webkit-text-size-adjust to 100% seems to be the best of both worlds.

When iOS detects a phone number, address, or calendar date, it oh-so-helpfully sets those items as links to make it easier to immediately call, map, or add an appointment within other apps. The trouble is the that link colors are the standard ‘internet blue’, or #0000FF. This color can be difficult to read on dark backgrounds, to say nothing of it not matching the style of your email’s design. Thankfully, there’s a workaround.

First, for the phone number. In the of your email, add this iOS-specific tag:

Using that, iOS will no longer auto-detect and style phone numbers (Apple also lists its other tags here). You should, however, provide your own way to call from an email. You can do that by wrapping a phone number in a line and setting the href attribute with a tel value:

You can now style the link as you see fit. Addresses and dates work a little differently, and the solution is a little hacky, but that’s okay; it’s par for the course in HTML email. In order to override the blue link color, you wrap the links in an inline element like an , then you apply your own color:

Be aware that, regardless of the fact that you changed the link colors, the iOS functionality isn’t disabled on any of these items. An errant tap of a date or address will still open up calendar and map applications, so it’s a good idea to make these links a little different than your other standard links, so folks avoid confusion or frustration.

Windows Mobile

Windows Mobile Text Size Adjustment

Much like in OSX and iOS, small text is also resized on Windows Mobile. The same vendor-prefix-based CSS property is used here, just with the ms vendor prefix instead of the webkit one.

©2001-2020 All Rights Reserved. Mailchimp® is a registered trademark of The Rocket Science Group.

Interpolation

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #<> in any of the following places:

SCSS Syntax

Sass Syntax

CSS Output

In SassScript

LibSass and Ruby Sass currently use an older syntax for parsing interpolation in SassScript. For most practical purposes it works the same, but it can behave strangely around operators. See this document for details.

Interpolation can be used in SassScript to inject SassScript into unquoted strings. This is particularly useful when dynamically generating names (for example for animations), or when using slash-separated values. Note that interpolation in SassScript always returns an unquoted string.

SCSS Syntax

Sass Syntax

CSS Output

рџ’Ў Fun fact:

Interpolation is useful for injecting values into strings, but other than that it’s rarely necessary in SassScript expressions. You definitely don’t need it to just use a variable in a property value. Instead of writing color: # <$accent>, you can just write color: $accent !

вљ пёЏ Heads up!

It’s almost always a bad idea to use interpolation with numbers. Interpolation returns unquoted strings that can’t be used for any further math, and it avoids Sass’s built-in safeguards to ensure that units are used correctly.

Sass has powerful unit arithmetic that you can use instead. For example, instead of writing #<$width>px , write $width * 1px —or better yet, declare the $width variable in terms of px to begin with. That way if $width already has units, you’ll get a nice error message instead of compiling bogus CSS.

Quoted Strings

In most cases, interpolation injects the exact same text that would be used if the expression were used as a property value. But there is one exception: the quotation marks around quoted strings are removed (even if those quoted strings are in lists). This makes it possible to write quoted strings that contain syntax that’s not allowed in SassScript (like selectors) and interpolate them into style rules.

SCSS Syntax

Sass Syntax

CSS Output

вљ пёЏ Heads up!

While it’s tempting to use this feature to convert quoted strings to unquoted strings, it’s a lot clearer to use the string.unquote() function. Instead of # <$string>, write string.unquote($string) !

  • Current Releases:
  • Dart Sass1.23.3
  • LibSass3.6.3
  • Ruby Sass вљ°
  • Implementation Guide

Sass © 2006–2020 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, and numerous contributors. It is available for use and modification under the MIT License.

-ms-interpolation-mode в CSS

Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.


В данной теме, рассмотрим варианты подстройки элементов дизайна шапки, а именно — картинок, под резиновые макеты сайтов.

Делается это, обычно, тремя основными способами:
* Вёрсткой шапки, с использованием не фиксированных областей с фоном.
* Изменение параметров позиционированного изображения — разными способами.
* Изменение всего вида элементов методом динамического добавления/изменения стилей.

Вёрсткой шапки, с использованием не фиксированных областей с фоном.

Наиболее распространённой и кроссбраузерной, является конструкция вида:

200?’200px’:»+(this.scrollHeight+5)+’px’);»>

.
В подобном исполнении, всё просто — рисуется шапка, в каком-нибудь графическом редакторе, например в фотошопе или кореле, нарезается на отдельные графические элементы (фрагменты):

.
Для таблицы, в данном случае, прописывается фон, а ширина указывается в процентах — обычно 100%.
Ширина ячеек таблицы, в которых будут размещаться графические элементы, обычно прописывается в пикселах, но, как минимум, одна из ячеек таблицы должна иметь свободную ширину (auto).
То есть если ячеек две, как в данном случае, одной прописывается фиксированный размер, равный ширине картинки, второй устанавливается значение «auto» — то есть на всю оставшуюся ширину.

Сами картинки могут вставятся в предназначенные для них ячейки, как просто картинкой (тегом ), так и фоном.
В данном случае, картинки вставлены фоном, так как левая ячейка уже содержит текстовый блок — копирайт, а правая предполагает его наличие.

Здесь все просто — смотрим пример:

Но, не каждую шапку можно нарезать подобным образом, и вот здесь начинают возникать некоторые сложности.
Варианты их решения рассмотрим далее .

Изменение параметров позиционированного изображения

Масштабированием относительно родительского элемента.

В данном случае — таблица.

Сразу хочу отметить, что у браузера Internet Explorer небольшие проблемы с изменением размеров объекта — в данном случае — картинки.
Суть его в следующем:
Если у картинке реальная ширина равна, допустим 1024px, и необходимо чтобы при изменении ширины окна браузера это изображение растягивались/сужались пропорционально, то при сужении окна браузера ширина изображения в определенный момент “застревает” и не сужаются дальше. В результате чего оно выходит за пределы предполагаемого контента.
То бишь, изображения не сужаются меньше их фактического размера.

Обходится этот «баг» достаточно просто и заключается всего в одной строчке CSS-кода — в свойстве «table-layout: fixed», которое нужно применить к таблице, в которую заключено изображение.

Следовательно, если у вас картинка шапки заведомо больше, минимальной ширины сайта, нужно задать таблице этот параметр.
Задаётся он через стили (CSS) и имеет всего два аргумента: «auto» и «fixed».

Кроме того:
Если у изображения не указана высота, или указано значение «auto» — изображение масштабируется пропорционально (сохраняя соотношение сторон).
Если же высота указана конкретно (в любых положительных единицах измерения), то соотношение сторон нарушается и изображение масштабируется только в ширину, сохраняя заданную в высоту.

200?’200px’:»+(this.scrollHeight+5)+’px’);»>

CSS-стили (изображение масштабируется пропорционально)

IE Fix: Bicubic Scaling for Images

Easily manage projects with monday.com

Devthought had a little CSS tip the other day that is definitely worth repeating. It’s not new, it’s just an important little trick to know.

If you use width or height tags to resize images in your markup, IE will ensure they look incredibly awful unless you use this little snippet. In general, resizing images in the browser isn’t recommended, but of course there are always exceptions.

Comments

That’s a great tip, Idpnt think ive ever seen an ms vendor extension used before

heard of bicubic resampling before, never realised IE could do it! thnx!

oh nice, great little tip!

Rule no 1. Do not scale images in browser! :)

This is just AWESOME!

“but of course there are always exceptions.”

what would one of those be?

There’s a lot of gray area when doing client work through a cms, especially with the client who just doesn’t “get it” or understand how to resize images/the benefits (no matter how much education they go through).

It’s useful when you’re trying to not break the design. Then you can go back and fix the problem without any shocking “my web site is broken!” client freak-outs

It helps when you need several sized thumbnails of an image and, because of the CMS you are using, you don’t want to create and manage 5 different copies of the same image. You can scale the thumbnail and have one image download for all instances of that image at slightly different sizes.

You certainly don’t want to have a high-resolution image squished down, but it does save bandwidth and server calls to reuse small images.

Chris C. this Hack just work with .jpg and .gif (without transparecy).

Thanks for the tip!

Using EM mesurements for images. In one case I’m working on now I have to create a text resizer and the images need to scale with the rest of the document.

Thanks. That is very useful information. I’ve bookmarked this article and tweeted it.

Thanks a million Chris..
Never knew such a trick exists..

Thanks. This would be useful in a gallery… you could get away with uploading only the large version of the image, even for the thumbnail!

I would really like to know who at Microsoft thought this was a sensible default…

I actually spent about half a day a few weeks back trying to achieve ‘smoother scaling in IE’ before I stumbled on that same code – what a revelation. While I agree that images should only be scaled in a browser as a last resort, anyone who uses Imageflow or Galleria should definitely include this little gem. Thanks Chris. (And the article by schill on Code.Flickr)

Never heard of this. Great find, Chris!

IE has a capability (under Internet Options) to load a default style-sheet that is applied to every page. If you create a style-sheet file with this rule in it, and set IE to load this file as a default-style sheet, you can enable bicubic scaling for all images in IE.

Single best CSS trick I’ve gotten from this site.

Wish I knew about this years ago!

Thanks for the great tip. My business partner has trouble resizing images for her blog post so she just lets Word Press do it. Often they look terrible on IE and I have to clean it up. Not any more! @TraceyHolinka

That’s a good tip, hopefully IE8 will have that be the default. I can’t imagine why anyone would ever want the current behavior.

I use a CMS at my workplace, so this could become handy as most of our clients probably resize their images via browser scaling. Thanks CC and Devthought :)

the “-ms-interpolation-mode” seems to be IE 7 only, you will need a AlphaImageLoader Filter for IE 6.

What?! I never, ever knew you could do that. Why on earth does IE7 default to not doing this? Is there any legitimate reason why you wouldn’t want an image to scale smoothly?

It’s nice, but it wont validate on CSS (W3C CSS Validator)

It won’t validate because it’s not valid CSS. It’s proprietary CSS for Internet Explorer. Just like -moz-border-radius is for Firefox.

If you want to keep your master CSS file clean, put the proprietary CSS in a IE-only stylesheet. Or make a “dirty stylesheet” where all the proprietary styling goes.

Excelent work! Thaks!

Nice, but: Why would you want to scale an image client-side and not just provide a scaled version from the server?

You can’t always do that. I think even WordPress scales images.

I’ve never heard “-ms-interpolation-mode” and I rarely scale images.
Anywayz…tnx for posting this one. Cheers!

How about don’t resize images? it gives a performance hit, and its they will always turn up fucked, NO HACKS NEEDED WHOOHOOO

I never believed in resizing images in the browser but as Josh N. says in his comment, if it’s the same image with just a slight difference in size it makes sense to do it, saving space and bandwidth.

Cool little tip. Thanks for sharing!

Excellent! But I noticed it doesn’t work too well or at all in IE6 anybody else noticed this?

That’s the best tip I could ever have since some time, since a lot of portuguese still use IE out of ignorance.

Pretty simple and yet very powerful tip!

Thanks, Great tip.

Unfortunately, this seems to cause some performance issues (especially when paired with JavaScript).

But a good, quick fix when used sparingly.

Nice one Mr Coyier, really useful when you can’t guarantee all of the images will be resized properly by the client.

Great tip man, thanks for mentioning it!

Great tip, is there a way to do this for PNG?

JohnB hit the nail on the head… I’m currently creating a javascript gallery that, when viewed on machines without JS enabled, will resize my images via the HTML, so that I can display them nicely within my layout.

When the javascript kicks in, it just grabs all the images, replaces the size in each image tag and assembles my gallery elsewhere on the page.

Incredibly handy. Thanks for this tip!

great tips, so useful for me

For a different take on how to integrate large images within websites check out the Inline Multiscale Image Replacement technique:
http://gasi.ch/blog/inline-multiscale-image-replacement/

As a nice side-effect, you can publish large images at any size you might have without having to pay a bandwidth premium.

Even though it is somewhat piggy-backing on Flash it perfectly degrades in situations where Flash is not available.

As it’s still quite rough around the edges, I’d love to hear your feedback!

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534068c3ed878f85 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Интересные CSS-хаки, которые облегчат вам жизнь

Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust .

Не стоит писать outline: none ни для одного из элементов. Тогда можно будет видеть где находиться выделение в брузере по нажатию кнопки tab , а пользователи мобильных устройств будут наверняка уверены, что они нажали на вашу ссылку.

Нехитрые манипуляции со стилями этих псевдо-элементов позволят вам поменять своства подсветки выделенных элементов на странице.

Поколдовав с этими нехитрыми псевдо-элементами вы сможете настроить внешний вид скроллбаров для десктопных браузеров на WebKit и Blink . Но это не все, скроллы можно настроить и для IE :

И даже для `Firefox`:

Пока IE 7 жив, то необходимо помнить, что он ужасно скейлит изображения.

Microsoft CSS Vendor Extensions

As you may know, all browsers have a set of CSS features that are either considered a vendor extension (e.g. — ms-interpolation-mode ), are partial implementations of properties that are fully defined in the CSS specifications, or are implementation of properties that exist in the CSS specifications, but aren’t completely defined. According to the CSS 2.1 Specification, any of the properties that fall under the categories listed previously must have a vendor specific prefix, such as ‘-ms-‘ for Microsoft, ‘-moz-‘ for Mozilla, ‘-o-‘ for Opera, and so on.

As part of our plan to reach full CSS 2.1 compliance with Internet Explorer 8, we have decided to place all properties that fulfill one of the following conditions behind the ‘-ms-‘ prefix:

  • If the property is a Microsoft extension (not defined in a CSS specification/module)
  • If the property is part of a CSS specification or module that hasn’t received Candidate Recommendation status from the W3C
  • If the property is a partial implementation of a property that is defined in a CSS specification or module

This change applies to the following properties, and therefore they should all be prefixed with ‘-ms-‘ when writing pages for Internet Explorer 8 (please note that if Internet Explorer 8 users are viewing your site in Compatibility View, they will see your page exactly as it would have been rendered in Internet Explorer 7, and in that case the prefix is neither needed nor acknowledged by the parser):

Property Type W3C Status
-ms-accelerator Extension
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension
-ms-block-progression CSS3 Editor’s Draft
-ms-filter Extension
-ms-ime-mode Extension
-ms-layout-grid CSS3 Editor’s Draft
-ms-layout-grid-char CSS3 Editor’s Draft
-ms-layout-grid-line CSS3 Editor’s Draft
-ms-layout-grid-mode CSS3 Editor’s Draft
-ms-layout-grid-type CSS3 Editor’s Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor’s Draft
-ms-interpolation-mode Extension
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension
-ms-scrollbar-arrow-color Extension
-ms-scrollbar-base-color Extension
-ms-scrollbar-darkshadow-color Extension
-ms-scrollbar-face-color Extension
-ms-scrollbar-highlight-color Extension
-ms-scrollbar-shadow-color Extension
-ms-scrollbar-track-color Extension
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor’s Draft
-ms-zoom Extension

We understand the work involved in going back to pages you have already written and adding properties with the ‘-ms-‘ prefix, but we highly encourage you to do so in order for your page to be written in as compliant a manner as possible. However, in order to ease the transition, the non-prefixed versions of properties that existed in Internet Explorer 7, though considered deprecated, will continue to function in Internet Explorer 8.

Changes in the filter property syntax

Unfortunately, the original filter syntax was not CSS 2.1 compliant. For example, the equals sign, the colon, and the commas (highlighted in red ) are illegal in the following context:

filter: prog >: DXImageTransform.Microsoft.Alpha(Opacity = 80 , FinishOpacity = 70 , Style = 2);

Since our CSS parser has been re-designed to comply with standards, the old filter syntax will be ignored as it should according to the CSS Specification. Therefore, it is now required that the defined filter is fully quoted. The proper way of writing out the filter defined above (with changes needed highlighted in green ) would be:

-ms- filter: » prog >« ;

In order to guarantee that users of both Internet Explorer 7 and 8 experience the filter, you can include both syntaxes listed above. Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8). Here is a CSS stylesheet example:

#transparentDiv <
-ms-filter: «prog > filter: prog > opacity: .5;
>

Thanks for your time and we are glad to hear your feedback!

Илон Маск рекомендует:  Что такое код stretchbit

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL