rows属性和宽度高度关系研究,HTML5网页动画工具

HTML textarea cols,rows属性和宽度高度关系研究

2016/02/06 · HTML5 · textarea

原文出处: 张鑫旭   

一、关于textarea元素的cols和rows属性

<textarea>元素,俗称“文本域”,或者“多行文本框”,其自带原生的HTML属性rows表示行的意思,可以改变<textarea>的可视区域高度,cols表示列,可以改变<textarea>的可视区域宽度。例如:

JavaScript

<textarea></textarea> <textarea cols="30" rows="5"></textarea>

1
2
<textarea></textarea>
<textarea cols="30" rows="5"></textarea>

图片 1
会发现,下面的尺寸明显比没有colsrows属性值的要大。

下面问题来了,我想很多小伙伴知道colsrows可以影响文本域的尺寸,那colsrows不同的数值和最终展示的像素尺寸之间有没有什么关系呢?可不可以通过公式计算呢?最终表现是否还受到其他CSS属性的影响呢?

我想,以上的问题就很少有人知道了,包括我在内,在写此文之前,也是模模糊糊的了解。

下面要扯点废话了,写这篇文章的时候,我其实内心是孤独的。这种感觉和自己一人去荒野寻找钓场的经历很像,你知道前方有一条河流,至于那里适不适合钓鱼,是不知道的,你想要知道结果,就需要亲自去确认。但是,前往河岸的道路之前没有一个人走过,也就是没有道路,而拦在自己面前的是齐人高的荒草地,它们是那么高那么远,似乎看不到头,你不知道草地中有什么危险,毒蛇野猪随时可能出现。然而,追随自己的热情的内心,还是毅然前去开拓者未知的道路,草木长得是那么的密集,自己只能用手用力拨开他们,狠狠踩在脚下才能前行,长着倒刺的茎藤,刀片般的叶子,在手上脸上留下一个个伤痕,当你前进了一半,到了整个荒草片野中间的时候,四周没有一个人,只有轻轻的风抹动草叶交织的嗦嗦声,一股孤独的感觉油然而生,在这一刻,再强大的内心也会犹豫,我要不要继续前进……

图片 2

对啊,我要不要继续前进呢!?最近一段时候,有一句话对我内心冲击很大,而且反复被提及,就是“你做这件事情的目的是什么?”

“拜托,不要搞这么功利,别搞这么累好不好,我就是追寻内心,我就是兴趣使然!”我心里的第一反应是这样的。

图片 3

然而,当突然抬头,发现周围没有一个人,满是荆棘的时候,内心就会犹豫,好比这篇文章,如果非要讲功利,讲目的,真的没什么,有价值吗?有人在意吗?花出去的时间值得吗?为什么搞些无人问津的东西?为何不去关注时髦的对项目有帮助的东西?为何别人在天上飞,你要在荆棘丛中孤独前行呢?(下面视频:路人在街头黑板上写下他们这辈子最大的遗憾)

 

图片 4

So, 统统out去吧,我继续我的前进,穿越未曾穿越过的草地,前往那召唤等待的河流,发现自己向往的垂钓处女地。

Adobe、标准和HTML5

2012/05/16 · HTML5 · HTML5

来源:Adobe CS6

“[提供商之间的]最激烈的竞争将与标准密切相关。大部分聪明人的眼睛将紧盯着技术标准。但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭。尽管存在着如此多的风险,标准仍然点燃了无限激情”

—The Economist, 1993年2月23日

在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准。Internet已存在标准,但万维网没有。浏览器的标准化甚至还未起步。

我们现在知道,与最近5年相比,作者在1993年看到的行业和他描述的“无限激情”是一个更加稳定和友好(甚至可能和谐)的时期。

但是,作者表达的观点是,标准(尽管平凡且无趣)是将信息和通信技术(ICT)行业凝聚在一起的黏合剂。标准的关键是互操作性和用户效用——它们现在的主要功能是使复杂、异构的系统可行且可满足用户需要。标准化领域现在比以往更加复杂,这在很大程度上离不开万维网的普遍性,这既提高市场的技术复杂性,也提高用户需要和期望。

万维网基本上基于两种标准——HTML和HTTP。HTML是万维网联盟(W3C)的建议标准,HTTP由Internet工程任务组(IETF)提出。

在这两种标准中,HTML更容易在各种消息中看到,因为它在Web内容的创建上占据主导地位。它是定义网络的基本标记语言的规则。使用HTML,异构系统、供应商和产品之间可以进行互操作。HTML4(HTML5的上一版)在HTML3.2推出之后不久推出,保留了自2000年以来主要的HTML形式。正是在这个时间段(2000年以来),网络发生了显著的商业增长。

但是,与ICT行业的方方面面一样,变化发生了。用户开始期望更复杂的功能,各种工具被创建来响应用户的期望和需求。举例而言,在动画领域出现了各种替代方案,到2005年,Macromedia Flash平台成为了用户所期望的和生产商所提供的交互性事实标准(广告、品牌网站、下拉菜单等)。

在市场的不断变化之中,多家浏览器开发商对复兴和改造HTML提供了一种推动力——自上一个HTML版本发布至今已近5年,整个市场也已改变。新产品包括针对多种平台和屏幕尺寸的开源浏览器和移动浏览器,电子发布和电子媒体变得愈加重要,对视觉增强的需要已然凸显出来。

为了响应此需要,多家浏览器开发商启动了一项创建一个更新的HTML版本(称为HTML5)的工作。该工作在W3C外部启动,但最终会转移到W3C内形成更正式的标准化和知识产权保护。(W3C强制要求W3C建议中包含的所有知识产权免费。通过将规范引入W3C,创建者和他们的赞助公司可确保所有他们(以及所有其他贡献者)无法在以后声明版权或创建一个以IP为围墙的花园)。此工作已创建了最新的HTML规范修订版(HTML5)。因为网络是对我们的客户至关重要的平台,所以Adobe向W3C标准化组织同时提供了HTML5的技术资源和知识产权。

但是,因为Adobe是一家工具开发商,而不是浏览器开发商,我们必须像所有工具开发商一样采用一种不同的方法来实现HTML5。浏览器使用HTML5——也就是说,Web浏览器读取HTML文档,然后将文档组合到一个看得见或听得见的显示界面上。Adobe的主要工作是检查HTML5是否“适合工具”。对于Adobe等工具开发商而言,重要的是规范是明确和无歧义的,所有各种实现都是兼容的,减少了创建针对浏览器呈现差异提供了具体调整的HTML5内容的需要。

作为工具开发商,Adobe专注于编写HTML页面的人和这个人在创建内容时的需要,或者专注于生成HTML页面的流程(服务器、工具)。我们收到的客户和用户反馈表明,用户已认识到行业正处于一个重要的过渡期,因为正在创造“新型网络”。旧知识正在被重新审视,新创意正在经历测试。在网络上生成发布质量输出的用户,习惯于像素特定的设计的用户,必须以不同的方式进行思考。现在他们必须创建自适应且可缩放的内容。所以他们会问自己(和Adobe):您如何控制体验而不控制像素?我们没有听到太多表明该模型是错误的反馈。我们在密切关注着这样一群人,他们尝试获取新工具来执行他们实现富有创意的表达所需的操作。

理想情况下,工具会使创造工作变得更轻松;在这个不断演化的市场中,Adobe面临的一部分挑战是理解用户想从工具中得到什么。用户想要让他们专注于以更快、更轻松、更好或更廉价的方式(或者可预测地,所有上述优势)实现他们的目标的工具。作为工具开发商,Adobe必须高瞻远瞩,摆脱对W3C规范的基本支持。举例而言,性能(包括工具的性能和输出内容的质量)是许多用户的关键考虑因素。如果性能配置文件在不同设备和浏览器之间差别巨大,这可能是与缺乏功能互操作一样巨大的壁垒。随着移动访问变得更加普遍,性能成为了一个尤其重要的问题。

创建Web内容的群体已发展地非常多样性,新标准需要广泛、深入地支持这种多样性。这样做,使Adobe的客户能够拥有生成他们想要的高质量和强大的网站所需的一致性和互操作性。标准所提供的一致通信至关重要,这在它缺乏时非常明显。每个人都还记得(或应该记得)二十世纪90年代中期的Netscape-Microsoft浏览器大战。这是浏览器开发商蓄意添加不兼容竞争对手浏览器的功能的一个事例。这个时代已在一般用户和开发商的抗议中结束。所以,Adobe用户的第一个需求是在这些无处不在的浏览器之间一致的HTML5呈现,一种“编写一次,随处良好运行”模型。

但是,要实现此目标,Adobe在修改和专门化我们的Web产品以利用新功能之前,一直在等待标准的稳定化。我们在开发HTML5工具的过程,还使用了我们跨不同平台(PDF、Flash、HTML、多媒体)的广泛的工具开发经验。与此同时,Adobe的用户可能主要是内容生成者,他们并不真正关心技术规范——他们希望Adobe关注规范,然后开发出最佳的工具供他们表达自己的想法和创造力。他们的问题是,“我们如何使用不断变化的标准所带来的能力表达我们想要什么,我们如何将它们整合到工作流中?”以及,“您能够多快提供这些工具?”

用户需要和需求变得日渐复杂,尤其是在所有一切(比如视频、杂志和电视)变得数字化时。此外,交互式设备的种类比桌面和笔记本时代多得多。现在,屏幕尺寸和文本可见性,以及交互性机制在不同设备上表明应用程序和内容必须采取的形式的方式上各不相同。最近,Adobe展开了一些有趣的讨论,而杂志出版商反馈,他们希望在平板电脑和其他设备上复制他们的高质量印刷出版物。具有类似尺寸的设备类别已然出现。目前,Adobe已开始认识到布局模式可适用于不同的类别。在创建者从一种类别进入另一种时,比如从小型手持设备尺寸进入平板电脑尺寸,再到台式机时,存在一些“断点”。这些设备还有不同的交互模式。用户喜欢与设备独立地创作的想法,但也希望放大每种设备的能力。

与此同时,用户注意到,用户熟悉的丰富的印刷品还未使用HTML5。HTML5/CSS布局标准并不像他们在印刷环境中所熟悉的标准那么完善。为了响应这一区域的用户需要(以及帮助行业创建更丰富的显示效果),Adobe最近向W3C CSS工作组提议了一个CSS3区域模块。另外,由于Adobe客户群的多样性,移动创作在目前对几乎所有客户都至关重要。这已成为了他们的一个重要出路,并且这一趋势正在迅猛地增长(在智能电话和平板电脑上)。例如,Adobe的工具集被出版商用于创作杂志(使用InDesign),我们将为他们提供一种使用标准导出内容并在移动设备上显示的方式。这一切创建满足用户需要的工具紧密相关,而工具离不开稳定的标准。

Adobe用户也关注不断出现的大量规范。再一次,其中一些规范并不仅仅关系到部分客户。它们影响到我们支持什么和不支持什么。作为工具制造商,我们需要满足对有用和适用的工具的需求。我们需要理解用户需求,然后需要确定如何和何时将规范结合起来,使它们变得更强大。当处理CSS区域时,Adobe认识到您可使用它执行有趣的布局,但在与JavaScript结合时能实现更有趣的操作。

Adobe也已开始向WebKit工作做出贡献。上面已经提到,与其说HTML5规范引起了用户的兴趣,倒不如说它们能够实现和运行在HTML5上构建的代码。因此,我们在工具中使用了WebKit,向WebKit引擎贡献了我们的错误修复程序。再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。作为我们工作的一个示例,在8月中旬的WebKit提交期间,Adobe的Alexandru Chiculita被得到了如下表彰“……为浮动元素查找添加了 一种新的性能测试 ,它带来了一种优化,在查找浮动元素上带来了大约150%的性能改进。”再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。

类似地,借助所有主流浏览器中对SVG的支持,我们注意到我们的用户现在要求Adobe恢复对在已存在多年的Adobe Illustrator中创建SVG的支持。他们还希望我们的所有产品为SVG提供更多支持。此外,来自Adobe实验室的工具Wallaby可从Flash中导出HTML,并同样利用SVG。

矢量图形是构建高保真Web平台的一个重要部分,也是Adobe在网络上实现高保真度呈现的目标的一部分:布局控制、丰富的动画和高质量排印都是缩小差距的重要元素。HTML5有望从“80%的份额”提升到为网络创建富应用程序和内容而“唯一需要的平台”。作为这一推动力量的一部分,有一种使用HTML和CSS创建动画的需要,我们正在开发工具来提供浏览器支持但工具中缺乏的HTML5功能。我们知道我们有能力提供优秀的工具——请访问Adobe Edge,查看来自Adobe的最新示例。

与此同时,我们还开发了The Expressive Web作为供HTML5和CSS开发人员使用的一种资源。因为不是所有浏览器都一致地采用了HTML5的所有功能,我们发现在主流浏览器都认可它们想要使用的大部分功能之前,表明何种功能适用于何处和兼容何种功能(在不兼容时如何做),有助于开发人员实际熟悉HTML5和它的功能,以及它将拥有的缺点。为了帮助用户,Adobe提供了Adobe BrowserLab工具,它允许用户在不同的浏览器和配置上测试Web内容。我们会呈现您的内容,并向您发回图像以显示有效和无效的功能。

在您在浏览器中实现的功能方面,桌面与移动设备之间仍然存在着差距。在设备功能集成或访问上,我们还没有达到相同的丰富程度,但这种差距正在缩小:浏览器中添加了新功能,JavaScript引擎的性能改进了不少。前途是光明的,差距终会消除,但我们还需努力。

我们的传统软件产品拥有悠久的历史,但我们正在努力改进产品来与如今互联的时间更紧密地整合。我们提供了一些试验工作来判断客户反馈,比如在Photoshop Express中,允许通过浏览器和在移动设备上管理图像。您一定会看到我们在此领域的更多成就。

Adobe的意图始终是使用户能够最大化他们的信息和内容的价值和流行。我们不断在开发使对内容的访问更轻松、更迅速、更富表现力和更有价值的工具。因为即使细微的技术更改,对开发工具以及依靠它们的设计人员和开发人员也有巨大的影响,所以Adobe选择比提供试验性呈现器的厂商更缓慢地发展。我们的客户需要摆脱试验,它们希望使用Adobe工具实现此目标。因为我们通过工具来代表我们的用户,所以我们对HTML5的全景拥有与此领域的其他许多厂商不同的独特视角。而且正因为这种不同的、基于工具的视角,我们现在专注于来自W3C的更加成熟和稳定的HTML5建议。

图片 5

作者:Carl Cargill

 

英文原文:

 

赞 收藏 评论

图片 6

HTML5网页动画工具:Adobe Edge

2011/08/02 · HTML5 · HTML5

Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。

Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、 HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。产品界面如下。

Flash在网页动画领域仍占统治地位,Adobe此举显然是为了在巩固Flash地位的同时,紧跟潮流,不把鸡蛋放在同一个篮子里。穷则思变,这是好事。

从去年4月份起Adobe针对HTML5发布了一系列功能和产品,其中比较引人注目的一款就是把Flash变成HTML5的转换工具Wallaby。

图片 7

Adobe认为HTML5对公司来说是一个机会,并且Flash并非没有机会,两者是互补关系。比如在3D游戏方面Flash仍是不可或缺的工具。另外,某些HTML5在各个浏览器上的体验并不一致。

目前Adobe Edge提供的是公测预览版产品,你可以在这里下载(需注册Adobe ID才能下载),1.0版产品将在明年发布。

原文:36kr

赞 收藏 评论

图片 8

二、cols属性值和宽度

您可以狠狠地点击这里:textarea文本域cols属性和宽度关系demo

界面如下:
图片 9

我们可以选择下拉修改文本域的文字尺寸,字体以及字符间距等,看看会不会对文本域的宽度造成影响。结果结论如下:

Chrome IE FireFox
font-size
font-family × ×
letter-spacing ×

可以看见,Chrome浏览器只受到字符大小影响,对字体和字符间距视而不见;而FireFox浏览器则每一个都会影响之;而IE浏览器不受字符间距影响。

那最关心的问题来了,cols的值和最终呈现的宽度有没有什么比如的关系或者公式呢?

在simsun字体,也就是宋体下,我们可以很容易得看出之间的关系为:

  • Chrome: 8px * cols + 17px
  • IE: 8px * cols + 17px
  • FireFox: 8px * cols + 29px

由于CSS,HTML这些东西是老外发明的,因此,cols每个单位相对的宽度是相对于英文字符而言的,在宋体下,可以认为是8px,后面的17px其实很好理解,表示滚动条的宽度。在window系统下,默认,所有浏览器的滚动条所占据的宽度都是17像素。所以,对于Chrome和IE浏览器而言,文本域最终的宽度(paddingborder尺寸暂不考虑)就是单字符宽度*cols值+滚动条宽度。然而,FireFox浏览器下,增加的宽度是29px,这个不就搞不清楚问什么是29px了。

在IE浏览器下,如果``

overflow属性值为hidden, 则没有后面增加的17px,而其他浏览器没有此现象。

然后,当我们使用其他字体的时候,最终的宽度表现则比较微妙了。因此,单个cols对应的单位就不是整数了,可能是8.1px也有可能是7.7px~7.8px这样子的。

总结一下就是:
貌似在Chrome浏览器下才有点实用价值,因为其他浏览器下的宽度波动太明显,任何其他环境的变化都会导致宽度不一样,这个其实在网页布局中是很糟糕的。因为,网页是自上而下流式的,高度可以很长很长,但是,宽度一般是固定的,资源比较紧张,要求布局精确,因此,一旦出现宽度在各个浏览器下不一样的情况,势必大大影响其实用价值。因此,在实际web制作的时候,除非一些对宽度要求不高的情况,其余时候,还是使用CSS width属性来控制文本域的宽度。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:rows属性和宽度高度关系研究,HTML5网页动画工具

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。