English 中文(简体)
表情 - CSS 背景还是内嵌图像?
原标题:Emoticons - CSS backgrounds or inline images?
  • 时间:2012-05-22 16:18:21
  •  标签:
  • html
  • regex

我在想用 smilies (表情) 来替换用户文本, 如 < code > : < code>, < code>: P 。 使用 regex 。 您认为替换为类的宽度元素是一个好主意吗? 然后我将微笑图像应用到该类?

或者我应该用 标签替换该文本吗?

CSS is usually seen as not part of the content, but these image smileys are... (if you disable the css, the text could change its meaning because emoticons are missing)

问题回答

外表是用字符显示的视觉信息,因此,如果用某种方式替换“:-”一词,自然候选者是特殊字符,如“”(U+263A White SMILING FAE)和“code>img 标记,如lt;img alt=”:-) Src=“smiley.png” & gt;

使用带有背景图像的元素有几个缺点,包括缺少与 alt 属性对应的元素以及打印时压缩背景图像的常见浏览器行为。

以方案方式改变任何表面形象(例如图像)都有些风险。 您不能确定每个“ :- ” 都是一个表情。 特殊字段中可能会出现各种奇特字符组合。 此外, 如果用户正在撰写例如“ 有关 < / em > 表情, 部分内容可能会在替换中丢失或扭曲 。

如果你有很多笑容,你最好使用 cs 螺旋图案, 因为它意味着浏览器只需下载一个图像文件, 而不是下载十几个小的图像文件 。

这将减少管理费用,并改进积蓄。

使用 CSS 显示图片。 最佳做法是从用户输入中剥去不需要的字符、 隐形字符和 HTML 标记, 以避免 HTML 代码输入和跨站脚本 。

将笑容放在平文本中, 并用 CSS 来显示图片 。

您可以使用 或其他元素来实现这一点。

例如, :) 应该是

然后,文本对没有看到图像的人或被禁用的 CSS 的人(他们将看到文字笑容)来说是有道理的。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签