标签：Safari

共 5 篇相关文章

IT 累计浏览 7

What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More

本文聚焦前端开发的最新动态与实用技巧。首先，讨论了在没有Safari浏览器的情况下测试网站的方法，推荐使用跨浏览器测试工具或远程调试，确保在没有Apple设备的情况下也能保证兼容性。随后，引入::checkmark伪元素，该特性允许自定义复选框、单选按钮等元素的选中标记样式，提升表单元素的视觉一致性。接着，展示了border-shape与shape()函数的结合使用，能够创建比clip-path更丰富的形状效果，增强CSS样式设计能力。此外，详细介绍了sibling-index()和sibling-count()函数，它们通过兄弟元素索引和数量实现动态样式计算，为布局带来新可能。文章还提供了使用data属性和attr()函数管理锚点关联的技巧，以替代被移除的HTML anchor属性。最后，强调了State of CSS 2026调查的重要性，倡导开发者关注核心特性以应对CSS快速迭代，并提及Firefox 151的新功能如容器样式查询和文档画中画API。整体内容旨在帮助前端开发者紧跟技术前沿，优化开发流程。

IT 累计浏览 1,934

-webkit-border-radius圆角属性

这篇文章聚焦于 CSS 中的 `-webkit-border-radius` 圆角属性，详细拆解了其语法、参数和实际应用中的注意事项。作者从基础语法讲起，说明了属性值可以是单个长度（形成四角相等的圆角），也可以是“水平半径 / 垂直半径”的形式（形成椭圆角）。文章特别强调了使用的细节和兼容性问题。例如，该属性支持动画；参数取值范围广泛，支持各种长度单位；并且提醒读者注意书写方向（如 `tb-rl`）对参数顺序的影响，在某些浏览器中顺序会反转。此外，作者指出这份参考手册主要针对 `-webkit` 内核浏览器，如果需要兼容其他内核，还需查阅其他资料。文中还穿插了一个在 Chrome 开发版中遇到的有趣 bug，并附有简单的代码示例，让讲解更具体。整体而言，这是一篇实操性很强的属性指南，为前端开发者提供了清晰的使用参考。

IT 累计浏览 3,529

vimari – safari下的vimium扩展

这篇讲的是作者在Safari浏览器中“拯救”自己习惯的故事。对于用惯了Chrome下Vimium键盘流插件的用户来说，切换到Safari后失去快捷键导航会非常不适应。作者寻找并找到了一个解决方案——vimari。 Vimari本质上是一个从Chrome版Vimium移植而来的Safari扩展，其核心代码大量基于Vimium，目标是为Safari用户提供类似的、基于键盘的网页浏览体验。文章特别强调了它的轻量化定位，即从Vimium中提取最适合Safari的部分功能。文章提供了实用的配置细节：例如，将“Modifier key to precede commands”选项留空后，按下“f”键就能直接列出并跳转页面链接，复刻了Vimium最经典的操作。作者也给出了关键提醒——安装扩展后务必第一时间升级到最新版本，以解锁全部可定制选项。通过几步简单调整，就能在Safari中找回熟悉的键盘导航效率。

IT 累计浏览 4,252

iPhone 5/iOS 6前端开发指南

iPhone 5与iOS 6的发布，让前端开发者们纷纷思考如何高效适配新设备与新系统。这篇文章正是为此而写，它超越了此前对Safari HTML5特性的基础讨论，直接深入到新系统实际的前端开发实战中。作者从开发者最迫切的需求出发，详细梳理了iOS 6为前端工作带来的具体改变。内容不仅涵盖Safari的新特性，更会触及整体系统层面带来的影响。对于关注移动开发的读者而言，文中对视口设置、CSS3新属性增强、HTML5多媒体元素支持等方面的实测总结，提供了第一手的兼容性参考。这不是一份泛泛的新功能清单，而是基于实测的适配指南。它能帮助你快速厘清在新环境下哪些旧方法依然有效，哪些新API值得尝试，让你的Web应用在iPhone 5上表现得更好。

IT 累计浏览 3,108

iPad Orientation CSS

这篇讲的是如何可靠地处理iPad屏幕旋转时的CSS适配问题。很多开发者习惯使用CSS媒体查询中的orientation属性（landscape或portrait）来区分横竖屏，但在iPad上，这个属性可能存在判断延迟或不准确的情况，导致样式切换出现闪烁或错位。作者从实际开发中遇到的布局错乱问题出发，深入分析了其根源：orientation媒体查询在iPad OS上并非实时响应设备的物理旋转。文章提出了一套更稳定的解决方案——优先使用基于视口宽度的媒体查询（例如 @media (min-width: 1024px) 和 @media (max-width: 1023px)）来定义横竖屏样式，并结合少量JavaScript来监听设备方向变化并添加对应的class。这种混合方案能确保样式切换与设备旋转动作精确同步。文章不仅给出了原理对比，还提供了完整的代码示例和针对不同iPad型号的测试结论。对于需要确保iPad上完美响应式体验的前端开发者来说，这是一个非常实用的避坑指南和优化技巧。