CSS破解的问题
读了一些博客认为这是很好的未来文献目录...... 也可能是一个重要的面试问题,你会问有一天......
写一个CSS的片段将显示在新的浏览器,在旧的浏览器款有蓝色,红色,在IE6和黑色的绿色IE7中
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
读了一些博客认为这是很好的未来文献目录...... 也可能是一个重要的面试问题,你会问有一天......
写一个CSS的片段将显示在新的浏览器,在旧的浏览器款有蓝色,红色,在IE6和黑色的绿色IE7中
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
这个奇怪的问题,其中一块Javascript的工作像往常一样栏的IE浏览器在所有ANS罚款
它是简单的,但因为不是我写的脚本,过了一段时间来调试这个“对象不支持此属性或方法”的错误,只有IE浏览器被扔了 可能! 如果我是写剧本,我不会有这个错误,不要混淆我的变量名,字段ID :)。
问题:对象不支持此属性或方法(第3行)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 解决方案:
在上面的例子(3号线......的“shortdesc = document.getE ......”)thirdrow产生错误。 我想所有的那种愚蠢的事情,甚至我不值得在这里提到,终于猜到什么! 只是改变shortdesc VAR别的摆脱了错误。 基本上! 变量的名称有不同从fieldID的
现在几个小时,我也一直在寻找解决方案,运行/测试在我的Eclipse / Android模拟器的静态HTMLs。 没有完全成功...... 我的意思是“完全”是被加载的HTML确定,但所有的CSS和JS,即没有见过的视觉表达。 在开发的话,CSS不会应用到页面...
想到这几个家伙新手的Android UI开发,如果我注意到了下来,我用显示的HTML片段。
和Android大师,请添加您的宝贵意见,帮助我们进一步在移动应用程序的UI开发新手!
对不起! 但是我假设你知道如何在Eclipse中创建一个Android移动应用。
创建您的活动,这将读取该文件从您的项目资产/文件夹的index.html'。
public class Test extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView webview = new WebView(this); setContentView(webview); try { InputStream fin = getAssets().open("index.html"); byte[] buffer = new byte[fin.available()]; fin.read(buffer); fin.close(); webview.loadData(new String(buffer), "text/html", "UTF-8"); } catch (IOException e) { e.printStackTrace(); } } } 再骑自行车是Buzzword的,并在web开发中,这意味着没有什么不同。 它节省能源,努力!
编写CSS和从设计创建HTML多年,我都遵循一些最佳实践,在节省时间和精力,我们俗称为“重新发明轮子”的长期追求。 一次又一次,我告诉自己,我必须创建一些模板,一些标准的可重复使用的CSS,我会用我今后的工作中的开箱。 虽然不是完全,但我还是设法实现一些目标。
在推进,再利用CSS的,我看比我自己,在为数不多的CSS框架,通常是提供给我们,并决定把他们使用,因为这些尝试和测试,并创建由许多经验丰富的开发。 更重要的是“避免重新发明”。
虽然退伍军人的常识,我已经尝试钢笔的一些关键概念/最佳做法/已进入了这些框架的建立,使尽可能循环再用CSS的想法。 希望这将有助于一些CSS开发只是最近登上了CSS的行列!
使用命名约定
这是最重要的因素,在可重复使用的CSS / HTML。 给予一致的名称,页面元素,使很少或修改页面组件和他们的风格与再利用。 按照这种说法,即使HTML5的,比其前任的重大变化而变化,是引进一些结构性的标签,即。 <article>,的<section>,的<Header>,<aside>,<nav> 的HTML5将带来什么? ]。 甚至与HTML 4(或更低),它是最好的,就像在下面简单的例子consistanly命名您的网页的标准部分...
请记住,你的项目大多数网页,最终具有相同的核心结构元素。 确定这些共同的核心页面元素....
<div id="container"> <div id="header"> ... </ DIV> <div id="nav"> ... </ DIV> <div id="sidebar"> ... </ DIV> <div id="footer"> ... </ DIV> </ DIV>
重置默认样式(CSS的重置):无论您使用的框架或自己写的,你必须提供的CSS重置[ 什么是CSS重置? ],因为它们减少或有时消除各种浏览器之间发生的视觉不一致。 在简单的话,CSS复位机制设置为零或空值的HTML元素的样式,因此重写他们可能带来的任何浏览器的默认值。 这提供了一个干净的石板,设置这些元素的任何默认的User-Agent无效[ CSS2.1的用户代理样式表默认的属性]。 所有的CSS框架的复位机制。 如果你正在写你自己的CSS重置的忠告是,如果你碰巧忘记重置键属性,它可能会导致跨浏览器问题,是非常难以调试。 记住,保持复位样式的副本,他们拖放到你创建的每一个新项目。
身体,DIV,DL,DT,DD,UL,OL,李, H1,H2,H3,H4,H5,H6, 前,表格,字段集,输入,选择,textarea的, P,BLOCKQUOTE,表,TH,TD { 边框:0px; 保证金:0; 填充:0; }
设置默认值(基准样式)元素:
当您设置(零或空)某些HTML元素的某些属性的默认值,它是要运用这些元素在每一个实例的一些风格。 这些默认设置可能会有所不同,按设计或根据你遵循的最佳做法。
最CSS框架,介绍了一些新的默认设置,除了重置浏览器默认风格。
这些默认值是无效的默认用户代理(离剥离的CSS复位),这些都将是跨浏览器保持一致。
记住,基准样式用于设置将会被用来设计样式。 例如。
HTML字体大小:77%;字体家庭:宋体,无衬线;} 强,H1,H2,H3,H4,H5,H6 {字体重量:大胆;}
常见的HTML组件和公共类的抽象风格:
几页组成的大多数项目将整个网站使用常见的HTML元素,例如一些排序形式,警报和错误,自定义弹出窗口,灯箱等,由于这些组件再次使用,整个项目,这将是有益的提供设置预定义的样式与这些组件相关的类,你可以自己节省了很多时间。
除了常见的HTML组件的定义可重复使用的样式定义,我们可以排版,颜色,甚至布局类的抽象风格有关。 我倾向于使用...像Clearfix,Font08,FontGrey,AlignL,DisplayB等常见的类
表单输入{边框:0px;背景:#FFFFFF;填充:0px 10px; _padding:0px 0px;高度:26px;颜色:#000000;线高度:30像素字体大小:1.1em;} 表单的TEXTAREA {边框:0px;背景:#FFFFFF颜色:#000000;字体大小:.9 EM;线高度:1.5em;溢出:可见;} ,fbold {字体重量:大胆;颜色:#CCCCCC;} fgrey {颜色:#666666;} flightgrey {颜色:#BBBBBB;} clearfix {明确:既;} 分频器{边界:1px固体#647B06;边境底:1px固体#9CC00A;高度:0px;} 。displayb。displayn {显示:块;} {显示:无;} alignr {文本对齐:右}。alignc {文本对齐:中心} {浮动:权利;}。floatr。floatl {浮动:左;}
修复常见的浏览器怪癖
各种浏览器实现的CSS代码和CSS规范的支持,提供不同的级别。 这样做的结果.... “浏览器怪癖”,我们开发人员留下来处理。 尤其是,IE6的困扰的最后期限,以满足大多数CSS编码。 好消息是经验已经聚集了可能出现的可重复使用的修复这些问题(通常被称为CSS的黑客 )。
请记住,保持这些黑客/修复方便
/ *以下变焦:1规则是专门为IE6 + IE7的。 * / * HTML。clearfix *:第一胎+ HTML clearfix { 变焦:1; }
不断完善你的CSS
最后。 如果你有启发,并打算使用一个或多个CSS框架,继承人是几个流行的快速列表....
请记住,使用CSS框架并不意味着你是懒惰的创建自己的......这意味着,你很聪明,学习别人的经验和失误,节省时间和提高生产率!!
今年的CSS完成10年内存在! 那些已经出现了一段时间,赢得他们的面包(或不)使用CSS,那么您可能已经知道我们如何挨饿的字体很好的选择。 即使像那些缺少的字体设计师CSS禅意花园已使用CSS背景图片,字体,以取代他们的设计做一些正义的追求。 我们也尝试过的闪存/ JavaScript®黑客来实现我们的设计目标。 这绝不是一种错误的方式来获得,我们希望把我们的网页设计的字体,但肯定的是,它是不是最可取的办法。 多年来网页设计师,像我一样,已经完全依赖于十年或为他们设计的字体。
Web标准和字体格式最近的事态发展使人们有可能比其他同旧的默认字体在字体渲染HTML文本。 进来“fontface”的CSS decleration。
@ fontface provids链接到实际的字体文件,并从网上检索的解决方案。 使用@ fontface,设计者可以使用,无需冻结作为背景图片的文字字体。 实施是非常简单,如下所示,但一切美好的事物有一个反面的一部分,不是所有的浏览器支持一个单一的“ 字体类型 ”。 如果您正计划在网站中使用@ fontface需要跨浏览器支持,那么你将有来源提供各种相同的字体类型。
使用@ fontface
@字体面{ 字体家庭:'CalligraphyFLFRegular“; SRC:URL(CalligraphyFLF.eot“); SRC:当地(“CalligraphyFLF),当地的(”CalligraphyFLF),URL(CalligraphyFLF.woff“)(WOFF')的格式,URL(”CalligraphyFLF.ttf)格式(TrueType字体“),网址(”CalligraphyFLF SVG#CalligraphyFLF)格式(SVG); } @字体面{ 字体家庭:“你的字体”; SRC:URL(“字体/ font_filename.eot”); SRC:本地(“备用名称”),当地(“Alternatename”), URL(“字体/ font_filename.woff”)格式(WOFF) URL(“字体/ font_filename.otf”)的格式(“的OpenType”), URL(“字体/ font_filename.svg的#font_filename”)的格式(“SVG”); } H2 {字体家庭:“你的字体”,格鲁吉亚,衬线;}
正如你可以看到从上面的例子,包括选择字体的字样,具有相同的字体,一组fonttypes链接。 因此人们称其为“字体工具包”。
有字体套件,明确允许使用CSS @ font-face的财产,根据最终用户许可协议(EULA)连接。
有用WebFont资源:
用我有限的技能与工具,如Photoshop和Illustrator集,我可以坦率地承认,我是个更好的开发人员比我一个设计师。 但我的背景与核心(服务器端)的Java / PHP / COBOL的发展,一直是我的UI开发能力非常积极的影响。 我的意思是,同时创造了我的设计,即每当我做设计,我认为设计如何可以最好转换成HTML的CSS,而这样做的HTML CSS,我给后端技术有关的思想和合理确定可以轻松实现的HTML成XSL循环或PHP的片段等。
多年来,我一直扔在设计UI设计师,谁可能不有一个线索,HTML或CSS是什么头。 这些年来我一直在想,我会要求太多,如果我只是希望设计师,谁是试图shov他的“不可能的代码”设计我的喉咙,只是一点点理解他的设计将被转换成。 这将有助于对不对?
然后,我遇到了这个职位今天的网页设计师不能代码 ...感谢主! 我只是许多有同样的感觉的人之一......上述artitle是位长篇大论...... 但值得一读,它的每一句话。
感谢埃利奥特杰伊股票......我就放心了!
下面是一些摘录从Elliots文章 。
老实说,我感到震惊,在2010年,我还是跨越未来“网页设计师”,谁也不能编写自己的设计。 没有任何借口。
...我应该已经多了几分具体在我的鸣叫。 我谈论没有连最基本的HTML和CSS技巧实际现场变成一个平面设计的设计师。 没有的人不是故意选择的代码,那些不能。 和我也谈到这里只有前端代码,当然这很荒谬,认为设计师也应该是惊人的后端程序员...
我们得到的“网页设计”在Illustrator中,300dpi的发送,不可能代码,没有一致性/可用性。
~~艾米马洪
它已经晚了,我有这某种程度上包装。 我知道会有许多人同意我的看法,我的意思是不是得罪或扰乱任何人不能代码,但我希望,我所说的一些反映一些点,总是拿出钻研时本次辩论。
在一天结束时,我没有失去过谁可以编写,谁不能睡觉。 我只是真正惊讶地发现,这么多的设计师缺乏前端的技能,因为我认为这是过去的事情了。
也可以参考的意见,有大约320评论,我写了......他们都是值得一读。
请在这里读Elliots满后.. 人可以没有代码的网页设计师
由于单选按钮和文本是内联的,因此文本将对齐单选按钮的底部,文本会显得稍下的单选按钮。
如果你想这些顶端对齐,你必须放置到单独的容器一样的div或跨度(如适用)的电台和文字,他们将采取照顾对齐。 使用表格单元格太多,外观设计的简要允许的话,它会更容易。
这不会看在每一个浏览器一样,每一个浏览器显示收音机略有不同,所以总是大小问题,无论你做什么。
HTML5仍然是一个草案。 正如我写的,HTML 5,在2004年开始工作,仍在之间的共同努力形状的W3C HTML WG和WHATWG的 。 字是下一代的HTML将增强功能和特性,将新的结构和语义,表单控制,原料药等多媒体标签。
简单的英语......这一切意味着什么,我们的UI开发...
<BODY> 的<Header> ... </头> <nav> ... </资产净值> <article> 的<section> ... </节> </文章> <aside> ... </搁置> <footer> ... </页脚> </ BODY>
而不是
<BODY> <div id="header"> ... </ DIV> <div id="nav"> ... </ DIV> <div class="article"> <div class="section"> ... </ DIV> </ DIV> <div id="aside"> ... </ DIV> <div id="footer"> ... </ DIV> </ BODY>
例如:
<video poster="poster.jpg"> <来源SRC =“video.3gp”类型=的“video/3gpp” 媒体=“掌上电脑”> <source src="video.mp4" type="video/mp4"> </视频> 的<audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </音频>
有更多的变化/升级到新版本...会不断更新这个职位,因为我来accross的任何有趣有用的.... 观看此空间
本文档可能无法提供准确的信息,如HTML 5规范仍然是积极发展。 如有疑问,可随时检查HTML 5规范 。
时间和一次又一次,当所有其他浏览器看到的行为告诉由W3C规则,IE浏览器的螺旋发展的精神,你发脾气,但这似乎并没有修复。 只是这样的一个人,这是IE7中的问题。
问题陈述:
我等其他严重的web开发中的许多人已经注意到很多时候,当有嵌套布局中的彩车上悬停,对一些链接(锚标记),含集装箱似乎移动几个像素的权利。 我曾尝试谷歌对于这个问题的解决方案,但几乎没有发现任何合理的答案,为什么发生时(可能有助于防止发生这个问题),所以我从来没有找到一个明确的解决问题的...
可能的解决方案:
出来的经验,我有通知倍,即90%,这个问题是由固定的不当行为容器中加入CSS定义缩放属性...
#somediv { 变焦:1; }
再次理由是含糊不清的...试试这个...
在IE中的一些元素,有一个“hasLayout的”属性,这是“真正的”默认。 许多视觉CSS行为,例如,一个alpha过滤器只适用于hasLayout的元素。 {变焦:1},似乎给目标元素的hasLayout属性 .... 有用吗? 我不这么认为...
变焦属性似乎也支持由铬,但其使用力似乎使许多不利影响,我的布局......试试吧,如果你的作品......如果没有,书签在“CSS胡扯”此页