本周我遇到了一个奇怪的问题,一些移动设备无法获取某些 CSS,而这些 CSS 在绝大多数其他浏览器上都已明确链接并加载。它不是基于用户代理的(我尝试过伪造它)。它也不是基于屏幕尺寸的。而是设备本身存在某种问题。事实证明,我犯了个错误。我正在使用这种方式 @import CSS
@import "css/style.css";
因为,这是在 Sass 或 LESS 中的正确做法。事实证明,这在大多数浏览器中的 CSS 中也能工作,但当然是不正确的。正确的做法是
@import url("css/style.css");
我本可以通过正确的方式解决它,但最终我通过不使用 @import 来解决它,而这几乎总是错误的做法。最好在样式表中直接写好 CSS。
更新:根据规范,不使用 url()
是有效的,但请告诉一些移动浏览器!(感谢 Tab Atkins)
整个星期我一直在对这个新设计进行大量的错误修复,我怀疑未来几周我大部分时间都将用于改进这个设计。
我启用了 Twitter 卡片数据(关于),作为 Joost De Valk 出色的 WordPress SEO 插件 的一部分。让我们看看它们是否开始工作,那将非常棒。我仍然认为 Twitter 很棒,即使 这 对我来说很遗憾。
我最近几个晚上都在为 BD Conf 准备我全新的演讲和工作坊。两者都将围绕“网页设计师的工作流程”展开,并大量借鉴了我最近重新设计本网站的经验。
我将 The Lodge 视频的视频托管切换到 Vimeo Pro。我希望它能够更快,提供更好的播放器,支持更多设备,同时保持非常高的质量。到目前为止,唯一的问题是 Vimeo 播放器在 Kindle Fire 和一些其他 Android 平板电脑上出现问题。我希望这个问题能够得到解决。
感谢我们的服务器管理员 Tim Sabat,CodePen 现在运行在一些新的高端服务器上。理论上,这些服务器将永远能够满足我们的扩展需求。
祝您在解决其余那些恼人的错误方面好运
我一直认为 @import 通常是不建议使用的,因为链接将并行加载 CSS,而不是为了一个大型外部文件而暂停页面加载。您是否有什么偏好?
即使在清除缓存后,我仍然无法在我的三星 Galaxy SII 上使用论坛。
主题列表看起来很棒,但当我进入某个主题时,我看到一个超长的列,只有最后一条评论显示在一个 20px(或类似)的列中。:s
我今天研究过购买其中一个进行测试,但它们价格不菲。我看看能否运行一个模拟器,继续修复错误。
如果您需要我帮助进行进一步测试,请告诉我,Chris。
伙计们,您可以尝试 Opera Mobile Emulator(它有一个 Galaxy S2 的配置文件)
我很高兴您解释了 @import 问题,因为我看到了您的推文,但没有理解问题。
我想我使用 SASS/LESS 太多了。
找到问题并坚持不懈地解决它,做得很好!您在跨浏览器兼容性方面投入了大量的工作。
关于 Vimeo - 这是一个不错的举措。我的 iPad 上一直收到来自 AmazonS3 的错误,因为它会冻结,然后在刷新时显示“票证已过期”等信息。Vimeo 速度快得多,在我使用过的所有设备上都没有任何问题。
非常高兴听到这个消息。希望这也能加快我发布新视频的速度。我迫不及待地想看到所有视频最终发布的那一天。(我估计还需要几周时间。)
Chris,
您是否阅读过 Paul Boag 使用 Vimeo 的经验?也许可以考虑一下
忘记了链接到他的博文
http://boagworld.com/reviews/vimeo/
这仅适用于 Vimeo 的非专业版使用。来自 此处
我是专业版用户=)
Chris,您在这方面做得非常好。不过有一件事……Vimeo 视频很模糊。是我一个人这样觉得,还是其他人也遇到了这种情况?
您可以尝试以下操作:1) 点击视频上的 HD 按钮切换到 HD 模式。2) 以全屏模式观看。3) 直接下载视频并在本地观看。4) 联系我,我可以检查您遇到的特定视频是否存在任何奇怪的问题。
好吧,我感觉自己很傻。HD 按钮解决了问题。之前没有注意到它,以为默认就是 HD。谢谢!
我开始每天查看 CodePen 以了解最新动态。那里发生了一些非常棒的事情,并且它正成为一个玩转最新 CSS 和 JS 的绝佳资源。
我喜欢 CodePen。它对我了解 CSS 和 Js 的新事物来说是一个很棒的资源……
Chris。您是否尝试在 Windows 上测试过?Chrome 渲染字体非常糟糕,首页图标在我看来像暂停图标,所有自定义字体都呈像素化
您是否考虑过切换到图像 - 特别是在主导航中 -
在他的视频(在 The Lodge 中)中,Chris 解释说他正在使用图标字体作为图标,这使得它们具有可缩放性,并且在视网膜/高分辨率设备上仍然看起来不错。我想权衡取舍是,为了让内容在现代浏览器/技术上看起来不错,它可能在旧版设备上看起来不太好
@Brendan 好吧,我使用的是 Windows 7 和 Chrome 21,我知道这是 Chrome 中的一个错误,但我只是想指出这一点
因此,使用 SASS 和 LESS 的神秘错误就此结束。不要误解我的意思,我认为这是一个好主意。但是,我将坚持使用 CSS。没有那些服务器端的东西。但是,我愿意在将来尝试一下。