必威体育下载基督教Heilmann

“css”标签的文章

使用CSS同时演示和显示JavaScript

周二,5月8日,2012

在编写文档或做示例时,您经常遇到相同的问题:如何同时显示和演示代码?您不希望看到代码显示和实时代码,因为它们会失去同步(另一方面,我总是发现在将代码复制到文档中时,我还会清理和优化它)。

最简单的方法是所有的“新”服务JSFiddle,JSBin,Dabblet,Tinker.io其他的(现在似乎每个月都有新的)你甚至可以把它们嵌入到其他文档中,但这意味着您需要一个iframe并从另一个服务加载内容(该服务将来可能会宕机或被遗忘)。

当然,另一种方法是使用Ajax/JavaScript将代码加载到页面中。早在2008年,我写了Ajax代码显示脚本(后来我很少使用它)。

我想知道如何在文档中简单地演示和显示内联JavaScript,而不需要任何额外的库。最简单的方法似乎是读取的innerHTML的脚本然后把它写成a精准医疗使用textContent (innerHTML将呈现HTML或者更大的符号,这不是我的想法)。

然而,现在使用相同的脚本,您可以更容易地进行简单的演示和显示CSS。看看这个演示页面为即将到来的Smashingmag文章:

用CSS显示的代码

如果你做一个视图源代码,你发现没有其他脚本在使用,但是它显示在页面中。这是什么来源*吗?简单,这是马赛厄斯Bynens谁让我进入它:只是显示脚本元素作为块,并添加一些生成的内容,以显示“源”文本:

脚本{
  显示: ;
  空白: 精准医疗;
  文本阴影:没有一个;
  背景: # 333;
  颜色: # fff;
  字体类型:摩纳哥,快递, 等宽字体;
  填充: 10 px;
}脚本::之前{
  内容: 的来源:;
  颜色: # 0 f0;
}

马赛厄斯已更详细的解释为什么会这样但是我再一次感到惊奇的是这些天有了这些很棒的浏览器,事情变得简单多了。

*Sourcery =做(看起来)意想不到的事情的神奇代码。

关于CSS的一些想法——前言

周二,3月13日,2012

有一天,我被要求为一本书写序CSS被我启发的人,这就是我写的。


当浏览器支持层叠样式表时,很多事情都变了。我记得我读到的第一篇关于它们的文章说,使用它们可以将web站点的速度提高10倍,开发和维护时间将减少一半。

这是完全正确的,因为这是一个连接到互联网听起来像Dubstep的声音和56k连接是奢侈的时代。为了设计我们需要的图像,背景颜色,表格布局和字体元素。当然还有很多很多的间隔gif创建填充。

快进到现在,你会发现,几乎没有任何网页设计是不可能的CSS。仅在去年一年,我们就获得了许多很酷的新特性,使用JavaScript的动画和转换很快就会像空白gif一样被遗忘。我们可以用不同的格式设置颜色,我们可以添加自己的字体,创建模式和渐变,我们有转换和转换,我们可以定义动画。我们可以生成内容CSS如果我们只需要视觉效果我们有各种各样的交互选择器当用户悬停在某个东西上时,单击它,甚至选择页面中的文本。

这一切都是有代价的:我们必须重复很多设置来支持所有的浏览器(以及未来的浏览器),实现上的差异会让我们的生活更加艰难。这一点,然而,是一个暂时的问题。遗憾的是,它并不能阻止人们重复过去的错误,比如只支持一种浏览器,而不为其他浏览器和更老的浏览器提供备份。我们已经做过了IE6这就是为什么现在我们的很多产品很难维护和升级的原因。

一般来说,无处不在的CSS在我们的发展世界里,它变得不那么神奇了。我们实际上把它看作是一个给定的,几乎没有任何的想法和文档如何写出结构良好的,干净,简单CSS这就行了。我们的高速连接,缓存和完全忽略CSS在“真正的开发人员”中间,我们的样式表成了垃圾场,而不是得到我们给予Python或JavaScript的同样的喜爱。想要证据?Github,一个相当简单的站点负载400KBCSS超过20000行代码。Facebook曾经有超过2MB的CSS在我的一些朋友重新设计之前CSS使用“面向对象的方法”,最后但并非最不重要的是,Internet Explorer中发现了一个新错误:在放弃之前,它只加载32个外部样式表。

现在,作为一个传统的,一想到32个样式表,我就摇头,但事实是CMS其他系统在大型站点上为每个模块创建一个工作表,而不是将它们连接起来,只是将它们作为一个新的链接元素添加到模板中。

我曾经写过300行CSS大量的文件,国际网站。当我离开公司的时候,半年后我看了它,它增长到3800行,有大量的选择器链和非常具体的类名,比如“headingright3c6bold”。为了创建可视化的更改,可怜的维护者显然不知道如何进行更改CSS工作(或不关心)添加随机HTML元素对模板有句柄,增加了专用性和许多其他犯罪的危害CSS就在我眼前。

这就是为什么我很高兴有一个新的运动,一种清理的欲望CSS我们把它写得又快又快,回到最初的承诺CSS

这本书是这个运动的一部分,作者展示了洞察力,对一个许多人认为太混乱而不值得关注的话题的远见和兴趣。我很高兴看到它出来,希望通过阅读它,你得到灵感,把艺术和魔术的速度回到你的样式表。

一个快速的:(ab)使用mediaqueries不为IE < 9提供CSS

周三,2月22日,2012

我现在正在写一篇关于如何使用:图像库的目标选择器的文章。像往常一样,年长的人在那里是美中不足的IE9支持选择器。所以我想到了一种服务CSS只有对浏览器有所了解。选项当然是条件注释,添加一个选择器IE < 9不理解每一个选择器我想过滤掉(喜欢使用
身体:胎条和以前一样html >身体过滤掉IE6)但后来我想到:媒体查询只支持inIE9及以上。所以你可以简单地做一个:

. foo {/ /……所有浏览器的样式}
@media屏幕和(min-width: 400 px) {
  . foo {/ /……新浏览器的样式}
}

测试一个400像素宽的浏览器窗口应该足够了,对吧?讨论Google +

惠普有了新标志!他们可以用CSS来做

周三,12月14日,2011

现在有很多关于惠普的新标识。我喜欢这样,因为他们可以节省一个HTTP的要求创建它CSS:

使用canvas进行动画制作,并使用JavaScript创建CSS3动画

周一,9月5日2011

昨天我们去了a克拉科夫的酷公园,波兰他们都在哪里儿童物理实验(和我):

物理公园展览

有一件事一直让我着迷,那就是非同心圆变成3D圆锥的视觉错觉。拍下以下照片:

non-concentric圈

然后旋转它,你就明白我的意思了(视频screenr)。

现在,回来后(像其他孩子一样)我想为自己重新创造这个,事实上很简单的HTML5帆布。如果你得到下面的嵌入,然后单击play按钮查看结果。

检查源代码。从本质上说,你所做的就是用黑白交替的颜色绘制一些同心圆,然后缩小它们的半径。不是保持圆的中心不变,而是用正弦波把它向后移动。

动画的工作原理很简单,只需旋转画布的中心-不需要计算循环的旋转。

这也是让我感到不适的地方:主图像没有改变,我们只是旋转betway体育官方网画布,在动画中不需要绘制循环。虽然性能看起来不错(至少在这台Macbook Air上),我很确定没有计算圆的动画会更平滑,资源消耗更少。这就是为什么我在一个画布上画圆圈,然后把它复制成动画的图像。你可以看到这两幅油画(一幅是浅灰色的)在这个演示。再一次,如果你得到下面的嵌入,然后单击play按钮查看结果。

下一步就是采纳每个人现在告诉你的建议,好好想想CSS动画作为硬件加速和更好的(引用需要,但那是我得到的印象)。我所做的就是旋转画布,这样做似乎是个好主意。所以,在下一个例子是CSS只在作画时使用帆布:

光滑!我喜欢它。我不喜欢的是现在它在歌剧中没有任何作用。另一件让我恼火的事是CSS非常冗长,因为我必须为每个浏览器重复使用不同前缀的所有动画信息和关键帧。

这就是为什么我想看看我能不能用CSS支持动画时,动态创建动画。这是可以做到的,但不是那么容易。检查结果

这看起来很有效,在Opera和其他浏览器中尝试一下,看看它们的区别,并获得使用哪种动画的信息。如果我使用转换而不是动画,那就更简单了。就目前而言,你不能访问,轻松创建和更改关键帧。这篇文章有更多关于这个问题的信息乔·兰伯特又做了一次展示。这让你怀疑我们是否应该在JS和CSS动画。